尝试使用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(); });