e.preventDefault() не работает

Question

У меня есть таблица, строки которой генерируются с событием щелчка элемента. Теперь это работает отлично, проблема заключается в удалении. Например, я уже добавил 5 строк, когда я нажимаю кнопку удаления (кнопка удаления создается через jQuery тоже при событии clickRow()), все строки, добавленные через функцию jQuery, удаляются, и форма отправляет событие, хотя У меня вызван метод e.preventDefault().

код JavaScript/JQuery:

 var counter = 2;    
     window.addRow = function addRow() { 
      var newRow = $('<tr><td><label>'+ counter +'</label></td><td><textarea name="txtActionStep' + counter + '" style="width:300px; height: 50px; word-wrap:break-word;"></textarea></td><td valign="top"><input type="text" name="txtOwner' + counter + '"/></td><td><button class="delete">delete</button></td></tr>'); 
      counter++;     
      $('table.actionsteps-list').append(newRow); 
     } 

     $('table.actionsteps-list').on('click', '.delete', function(e){ 
      e.preventDefault(); // stops the page jumping to the top 
      $(this).closest('tr').remove(); 
     }); 


     function postForm() { 
      var form = document.getElementById('actionStepsForm'); 
      document.getElementById('rowCount').value = counter-1; 
      form.submit(); 
     } 

HTML код (сама форма):

<form name="actionStepsForm" id="actionStepsForm" action="add_reprocessing.php?action=add" method="post"> 
<table class="actionsteps-list" width="510"> 
     <tr> 
      <th colspan="3" align="left">Action Steps</th> 
     </tr> 
     <tr> 
      <td>Step #</td><td>Action Step</td><td>Owner</td> 
     </tr> 
     <tr> 
      <td> 
       <label>1</label> 
      </td> 
      <td> 
       <textarea name="txtActionStep1" style="width:300px; height: 50px; word-wrap:break-word;"></textarea> 
      </td> 
      <td valign="top"> 
       <input type="text" name="txtOwner1" /> 
      </td> 
     </tr> 
    </table> 
    <table width="510"> 
     <tr> 
      <td align="right"><a href="#" title="" onclick="addRow(); return false;">Add Action</a></td> 
     </tr> 
    </table> 
    <input type="button" value="Create" onclick="postForm(); return false;" /> 
<input type="hidden" value="" id="rowCount" name="rowCount" /> 
</form> 

Верьте или нет, я застрял здесь в течение почти 3 дней в настоящее время. Я не могу найти какое-либо исправление в Интернете. Я не ошибаюсь.

Answer 1

поставил

$('table.actionsteps-list').on('click', '.delete', function(e){ 
     e.preventDefault(); // stops the page jumping to the top 
     $(this).closest('tr').remove(); 
    }); 

в

$(function(){$('table.actionsteps-list').on('click', '.delete', function(e){ 
     e.preventDefault(); // stops the page jumping to the top 
     $(this).closest('tr').remove(); 
    }); 
)};