将JS应用于动态创建的div？

Question

我的页面上有多个div，可以将其动态添加到页面中，也可以将其删除。

在页面加载时，使用uniqiue id和一个取决于div的通用类从localStorage加载动态创建的div ，我随其一起调用一个函数content() 。

函数content()如下所示：

function content(){
    alert("test");
    $(".two button").click(function(){
        var id = $(this).parent().attr("id");
        alert(id);
    });
}

很简单，它只是在调用该函数时.two警报“测试”，如果单击.two <button> ，它将.two警报.two <textarea> .val() 。

加载div后，此方法就可以正常工作，但是在克隆div时遇到了问题

当我克隆div时，它为它们提供了唯一的ID和上面的通用类。 在cloneDiv()的末尾，我调用content() ，以便单击内部的元素将产生与上述相同的结果。

问题是，该函数将被调用的次数与屏幕上div的调用次数相同，但是这也意味着单击div .two的<button>会警告.two <textarea> .val() 3次 。

TLDR； 单击.two get中的按钮的次数与屏幕上div的次数相同，因为一旦创建了动态div就会调用该函数，但只能调用一次。

有很多代码可以完成所有这些操作，但是我想我已经很清楚地解释了发生的情况。 但是，如果有帮助，我将制作一个演示。

Answer 1

您要使用.on函数：

$('body').on('click', '.two button', function(){
    var id = $(this).parent().attr("id");
    alert(id);
});

我会将其'body'部分更改为这些按钮的实际容器。 因此，假设按钮始终位于id为my-div的内容my-div ，您可以这样做：

$('#my-div').on('click', '.two button', function(){
    var id = $(this).parent().attr("id");
    alert(id);
});

您还只需要将此代码运行一次，因此无需将其放入多次调用的函数中。 只需将其放在$(document).ready(....) 。

小提琴： http ： //jsfiddle.net/gromer/dxbqz/

Answer 2

这就是“事件委托”的目的。 您在文档上设置了一个处理程序，它将处理其后代的事件，即使这些事件是在附加处理程序之后创建的：

$(document).on("click", ".two button", function(){
// put a click hander on the document to process clicks
// from buttons that are descendants of elements with class=two

Answer 3

问题是这样的：“在cloneDiv（）的末尾，我调用content（），以便单击内部的元素将产生与上面相同的结果。” 发生的事情是您将事件添加到现有元素上，因此这就是为什么您会收到大量回调的原因。 您应该改用.on函数，并且只能使用一次。 如果您多次调用.on ，则将产生相同的结果，因为将注册多个事件。

$(".two button").on("click",function(){
    var id = $(this).parent().attr("id");
    alert(id);
});

一次执行一次 ，每个匹配的按钮(".two button")都将对此做出响应，即使稍后添加。

另一种方法是将元素传递给content（）调用，然后从那里标记它，如果无论如何在创建元素时总是调用此函数。

function content(element){
 $(element).click(function(){
    var id = $(this).parent().attr("id");
    alert(id);
 });
}

附带说明，使用警报进行调试可能会出现问题，因为它们会中断程序执行。 我强烈建议改用console.log(id) ，然后在控制台中查找测试变量。 如果您使用的是第三方脚本并且需要查看哪里出了问题， console.trace()也是一个牢记的好地方。