Удалить динамически сгенерированную строку таблицы, используя jQuery

приведенный ниже код добавляет и удаляет строку таблицы с помощью JQuery функция добавления работает нормально, но удаление выполняется, только если я удаляю первую строку

<table>
    <tr>
    <td><button type="button"  class="removebutton" title="Remove this row">X</button>
</td> 
         <td><input type="text" id="txtTitle" name="txtTitle"></td> 
         <td><input type="text" id="txtLink" name="txtLink"></td> 
    </tr>
</table>
<button id ="addbutton">Add Row</button>

и script

 var i = 1;
$("#addbutton").click(function() {
  $("table tr:first").clone().find("input").each(function() {
    $(this).val('').attr({
      'id': function(_, id) {return id + i },
      'name': function(_, name) { return name + i },
      'value': ''               
    });
  }).end().appendTo("table");
  i++;
});

$('button.removebutton').on('click',function() {
    alert("aa");
  $(this).closest( 'tr').remove();
  return false;
});

может ли кто-нибудь дать мне объяснение, почему я могу удалить только первую строку? большое спасибо

Ответы

Ответ 1

Вам нужно использовать делегирование событий, поскольку эти кнопки не существуют при загрузке:

http://jsfiddle.net/isherwood/Z7fG7/1/

 $(document).on('click', 'button.removebutton', function () { // <-- changes
     alert("aa");
     $(this).closest('tr').remove();
     return false;
 });

Ответ 2

Вы должны использовать делегирование событий, потому что вы создаете динамические строки.

$(document).on('click','button.removebutton', function() {
    alert("aa");
  $(this).closest('tr').remove();
  return false;
});

Live Demo

Ответ 3

При клонировании по умолчанию он не будет клонировать события. Добавленные строки не привязаны к ним обработчиком событий. Если вы вызываете clone(true), тогда он также должен обрабатывать их.

http://api.jquery.com/clone/

Ответ 4

Простым решением является инкапсуляция кода события кнопки в функцию и вызов его при добавлении TR тоже:

 var i = 1;
$("#addbutton").click(function() {
  $("table tr:first").clone().find("input").each(function() {
    $(this).val('').attr({
      'id': function(_, id) {return id + i },
      'name': function(_, name) { return name + i },
      'value': ''               
    });
  }).end().appendTo("table");
  i++;

  applyRemoveEvent();  
});


function applyRemoveEvent(){
    $('button.removebutton').on('click',function() {
        alert("aa");
      $(this).closest( 'tr').remove();
      return false;
    });
};

applyRemoveEvent();

http://jsfiddle.net/Z7fG7/2/

Ответ 5

  $(document.body).on('click', 'buttontrash', function () { // <-- changes
    alert("aa");
   /$(this).closest('tr').remove();
    return false;
});

Это отлично работает, не берутся document.body