Question

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

这是我的代码：

$("#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/

可能是什么问题？

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

Answer 1

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

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

Answer 2

你快到了。请参阅 jsFiddle example 。

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

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

作为docs州：

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

此外，我发现.closest('tr')比.parent().parent()

更容易理解

Answer 3

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

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

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

编辑：似乎代理被取代（从jQuery 1.7开始 - 参考http://api.jquery.com/on/）。

Answer 4

使用实时功能

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

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

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

4 个答案: