尝试使用 jQuery 添加和删除表行答案

【问题标题】：Trying to add and remove table rows with jQuery尝试使用 jQuery 添加和删除表行
【发布时间】：2012-11-30 10:03:58
【问题描述】：

我正在尝试使用 jQuery 添加和删除表格行，添加的行包含一个删除链接，由于某种原因，它不适用于生成的元素，即使我使用 on。

这是我的代码：

$("#target").click(function() {
$('#myTable tr:last').after('<tr><td>Bla</td><td><div class="remove">REMOVE</div></td></tr>');
});
$(".remove").on('click', function(event) {
  $(this).parent().parent().remove();
});

http://jsbin.com/ucopun/1/

可能是什么问题？

删除链接应该删除它所在的整行。

【问题讨论】：

标签： jquery html-table tablerow

【解决方案1】：

当您使用on() 时，您仍然需要将事件绑定到页面上已经存在的容器元素。我想这就是你想要的：

$("#myTable").on('click', '.remove', function(event) {
  $(this).parent().parent().remove();
});

【讨论】：

这仅适用于附加到 dom 的元素吗？（又名老现场）
我相信它与live 非常相似，如果不完全相同的话。这个想法是绑定事件将在容器上触发，然后只有在实际目标与提供的选择器匹配时才会调用该函数。

【解决方案2】：

你快到了。请参阅此jsFiddle example。

$("#myTable").on('click', '.remove', function(event) {
    $(this).closest('tr').remove();
});

由于您添加的是在代码运行时不存在的元素，因此您需要使用.on() 绑定到在代码运行时确实存在的元素。

作为docs 状态：

事件处理程序仅绑定到当前选定的元素；他们在您的代码调用 .on() 时必须存在于页面上。为了确保元素存在并且可以被选择，执行事件绑定在文档就绪处理程序中的元素页面上的 HTML 标记。如果新的 HTML 被注入到页面中，在新的 HTML 之后选择元素并附加事件处理程序放入页面中。

另外，我发现 .closest('tr') 比 .parent().parent() 更容易关注

【讨论】：

太棒了，非常感谢！

【解决方案3】：

我会将事件绑定到表格并将其委托给按钮

参考：http://api.jquery.com/delegate/

$("#myTable").delegate('.remove','click' , function(event) {
  $(this).closest('tr').remove();
});

编辑：似乎委托被 on 取代（截至 jQuery 1.7 - 参考 http://api.jquery.com/on/）。

【讨论】：

从 jQuery 1.7 开始，.delegate() 已被 .on() 方法取代。
谢谢 - 更新了我的答案 :) 保留它取决于他使用的 Jquery 版本。

【解决方案4】：

使用直播功能

$('.remove',$("#myTable")).live('click',function(){
  $(this).parents('tr:first').remove();
});

http://jsfiddle.net/B8wSq/2/

【讨论】：