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

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

这是我的代码:

$("#target").click(function() { $('#myTable tr:last').after('Bla
REMOVE
'); }); $(".remove").on('click', function(event) { $(this).parent().parent().remove(); });

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

可能是什么问题呢?

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

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

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

你快到了。 看到这个jsFiddle示例

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

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

正如文档所述 :

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

另外,我发现.closest('tr').parent().parent()更容易.parent().parent()

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

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

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

编辑 :似乎委托被取代(从jQuery 1.7开始 – 参考http://api.jquery.com/on/ )。

使用实时function

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

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