Question

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

在页面加载时，动态创建的div从localStorage加载uniqi id和公共类，具体取决于div ，然后我调用一个函数，{{1 }}

函数content()如下所示：

content()

非常简单，它只是在调用函数时提醒“test”，如果点击function content(){ alert("test"); $(".two button").click(function(){ var id = $(this).parent().attr("id"); alert(id); }); } .two，它会提醒<button> .two {{ 1}}。

一旦div被加载，这样可以正常工作，但是当我克隆div时遇到问题

当我克隆div时，它会给它们一个唯一的id和一个像上面这样的公共类。在<textarea>结束时，我调用.val()，以便点击其中的元素将产生与上面相同的结果。

问题是，该功能将被调用多次，因为屏幕上有div，但也意味着点击div cloneDiv()中的content()会提醒<button> { {1}} .two 三次。

TLDR;单击.two中的按钮可以多次调用屏幕上的div，因为在创建动态div后调用该函数，但只应调用一次。

有很多代码要做这一切，但我想我解释了很清楚的事情。然而，如果有更多的话，我会掀起一个演示。

Answer 1

您想使用.on功能：

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

我会将'body'部分更改为这些按钮的真实容器。所以说按钮总是位于ID为my-div的内容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()也是一个很好的选择。

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

3 个答案: