使用jQuery删除动态生成的表格行

Question

以下代码利用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>

和脚本

 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;
});

有人能解释一下为什么我只能删除第一行吗？非常感谢。

- das kinder

Answer 1

你需要使用事件委托，因为这些按钮在加载时不存在:

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

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

- isherwood

Answer 2

如果您正在创建动态行，应该使用事件委托（Event Delegation）。

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

Live Demo

- Wilfredo P

Answer 3

默认情况下，在克隆时不会克隆事件。新增行未附加事件处理程序。如果调用clone(true)，则也应该处理它们。

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

- Danny

---

@isherwood - 最近我才接触到你的事件委托方式。以前我总是在创建对象后立即附加事件。我喜欢你的方式，因为我可以在代码中将所有事件处理分组放在最前面。这是个人偏好问题，还是有一种方式比另一种更标准？ - Danny

我会说这要看情况。对于下一个在你的代码中遇到困难的开发者来说，什么更清晰呢？ - isherwood

好的，我只是不想事先设置它。 :) - Danny

Answer 4

一个简单的解决方案是将按钮事件的代码封装在一个函数中，并在添加TRs时调用它：

 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/

- Andre Figueiredo

Answer 5

我知道这已经过时了，但我曾经使用过类似于这个的函数...

deleteRow: function (ctrl) {

    //remove the row from the table
    $(ctrl).closest('tr').remove();

}

... 带有这样的标记 ...

<tr>
<td><span id="spDeleteRow" onclick="deleteRow(this)">X</td>
<td> blah blah </td>
</tr>

...它运行良好

- atamata

Answer 6

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

这个完美运行，注意 document.body

- Uchenna Nnodim

---

抱歉，但这是Wilfredo的直接复制，但它也不会起作用。你只有一半的注释。 - vr_driver