javascript - 来自克隆元素的单击操作不起作用

Question

单击操作不适用于任何克隆的元素。

http://jsfiddle.net/Q9m4t/

HTML

<ul>
    <li>hello <a class="del" href="#">del</a></li>
    <li>new <a class="add" href="#">add</a></li>
</ul>

JS

$(".add").click( function() {
    $(this.parentNode).prev("li")
    .clone()
    .insertBefore(this.parentNode);
    return false;
});

$(".del").click( function() {
    $(this).closest("li").remove();
    return false;
});

有人可以帮忙吗？

Answer 1

Replace .clone() with .clone(true). This indicates you want to copy all event handlers over to the newly created cloned element. Read up more about this here.

jsFiddle here.

Answer 2

您可以委托 click 事件，而不是使用clone(true)which 将为每个克隆创建一个新的处理程序：

$("ul").on("click",".del", function() {
    $(this).closest("li").remove();
    return false;
});

演示

Answer 3

来自jQuery.clone()文档

通常，绑定到原始元素的任何事件处理程序都不会复制到克隆。可选的 withDataAndEvents 参数允许我们更改此行为，并改为制作所有事件处理程序的副本，绑定到元素的新副本。从 jQuery 1.5 开始，可以选择使用 deepWithDataAndEvents 增强 withDataAndEvents 以复制克隆元素的所有子元素的事件和数据。

因此，将true添加到该.clone()方法将允许您保留所有事件。

.克隆（真）