Question

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

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

depminusbutton0在firebug inspect元素中显示如此克隆（在克隆之前不存在，因为ID 0是动态插入的：

<a id="depminusbutton0">

任何想法如何使这个元素可以访问？

Answer 1

我能想到的两种可能性：

您是在元素存在之前安装事件处理程序，因此无法找到将事件处理程序附加到的元素吗？
您在文档的其他位置有一个冲突的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
});

克隆元素点击不工作Javascript

3 个答案: