Question

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

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

将.clone()替换为.clone(true)。这表示您要将所有事件处理程序复制到新创建的克隆元素。阅读有关此here的更多信息。

<强> jsFiddle here.

Answer 2

来自jQuery .clone() documentation

通常，绑定到原始元素的任何事件处理程序都不是复制到克隆。可选的withDataAndEvents参数允许我们要改变这种行为，而是制作所有的副本事件处理程序，也绑定到元素的新副本。从jQuery 1.5开始，withDataAndEvents可以选择性地增强 deepWithDataAndEvents复制所有子节点的事件和数据克隆的元素。

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

<强> .clone（真）

Answer 3

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

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

DEMO

克隆元素中的单击操作不起作用

3 个答案: