jquery - jquery - 克隆的行失去功能

Question

没关系....我用过现场，它似乎工作......

我有包含表单元素的表。当用户输入新值并单击添加按钮时，表的最后一行将被克隆，输入字段将更新为新信息。此外，每一行都包含一个删除图标。当用户单击删除图标时，它所属的行将被删除。

我有所有的工作...

除了，克隆行的删除图标不起作用。当您单击它时没有任何反应，我尝试了各种方法，但似乎无法弄清楚那部分......我一个月前刚开始使用 jquery 并认为我遗漏了一些明显的东西，但不确定是什么。 ..

我把代码放在jsfiddle上，希望有人能帮忙：

http://jsfiddle.net/sMqcB/

Answer 1

因为这些是新注入到 DOM 的元素。它不会知道您已经定义的现有点击事件。

解决方法：使用jQuery的on方法。

改变

$('img.seminars-faux-remove').click(function() {
    $(this).closest('tr').remove();
});

至

$(document).on("click",'img.seminars-faux-remove',function() {
    $(this).closest('tr').remove();
});

jQuery on将适用于当前和未来的元素。此方法可从 jQuery 1.7+ 开始使用。如果你使用的是旧版本的 jQuery，你可以考虑使用live。但是如果你使用的是 1.7+ ，你应该使用 jQuery on。

Answer 2

您可以通过使用.clone(true)而不是保留该功能.clone()。请参阅.clone()文档，特别是[withDataAndEvents]参数的含义。

演示