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

Click action from cloned element does not work

本文关键字：单击 操作 不起作用 元素      更新时间：2023-09-26

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

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;
});

谁能帮忙？

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

jsFiddle 在这里。

来自 jQuery .clone() 文档

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

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

.clone（true）

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

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

演示

相关文章：