单击时克隆的元素不起作用Javascript

Question

我有一些 javascript 可以成功克隆模板并将生成的 html 附加到 div。但是，当我尝试引用克隆的元素时，它是不可访问的，即使我在模板（和克隆系统）之外放置具有完全相同 ID（通过 Firebug 确认）的完全相同的元素，它也是可访问的。我相信我需要在克隆后进行某种更新，但我不确定。我试图用来访问（克隆）元素的代码（不向控制台记录任何内容并且不工作）是：

$("#depminusbutton0").on("click", function () {
    console.log('I triggered minus 0');
});

一旦克隆，depminusbutton0 就会在 firebug 检查元素中显示为这样（在克隆之前不存在，因为 ID 0 是动态插入的：

<a id="depminusbutton0">

有什么想法可以让这个元素可以访问吗？

Answer 1

我能想到的两种可能性：

1. 您是在元素存在之前安装事件处理程序，所以它找不到要将事件处理程序附加到的元素？
2. 您在文档中其他地方的 ID 存在冲突。

如果您要使用这种形式的事件处理：

$("#depminusbutton0").on("click", fn);

然后，#depminusbutton0 元素在您运行该行代码时必须存在。它会在您运行代码时在 DOM 中搜索该元素，并且不会连接到与您将来创建的该 ID 匹配的元素。

您可以通过在创建 #depminusbutton0 元素并将其插入 DOM 之后运行该行代码来解决该问题，或者您可以切换到使用委托事件处理，它将事件处理程序附加到一个共同的父级在您创建子元素之前确实存在。

要详细了解委托事件处理的工作原理，请参阅以下参考资料：

jQuery .live() vs .on() method for adding a click event after loading dynamic html

Does jQuery.on() work for elements that are added after the event handler is created?

一般的想法是这样的：

$(some parent selector).on("click", "#depminusbutton0", fn);

如果您有多个具有#depminusbutton0 id 的元素，那么您将不得不修复它并且只有一个具有该id 的元素。通常对于克隆，您希望使用类名而不是 id，因为您可以拥有多个具有相同类名的元素。

Answer 2

您是否将事件附加到尚不存在的元素？如jQuery documentation中所述：

事件处理程序仅绑定到当前选定的元素；当您的代码调用 .on() 时，它们必须存在于页面上。

只需确保在创建克隆元素后将事件附加到它。

Answer 3

$(document).on('click', '.class-or-id-name', function() {
    console.log("Heyyy its clickable");
    // do more stuff
});