申请JS动态创建的div？

Question

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

在页面加载，动态创建的div的是从localStorage装有uniqiue的ID并根据DIV一个通用类，我调用一个函数随此，content()。

功能content()看起来是这样的：

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

很简单，它是所有警报“测试”时，函数被调用，如果你点击.two<button>，它会提醒.two<textarea>.val()。

一旦div的已装也能正常工作，但我遇到问题时，我会克隆div的

当我克隆div的，这让他们有一个唯一的ID和前面一样的通用类。在cloneDiv()的末尾，我打电话content()，以便点击里面的元素将产生与上面相同的结果。

的问题是，该函数将被调用多次出现在屏幕上div的，但也意味着在DIV .two点击<button>会提醒.two<textarea>.val()三次。

TLDR;点击.two中的按钮，屏幕上会显示div的次数，因为一旦创建了动态div，就会调用该函数，但应该只调用一次。

有很多的代码做这一切，但我想我解释了什么是很清楚的情况。不过，如果这将有助于更多的话，我会掀起一场演示。

Answer 1

这是什么 “事件委派” 是。你建立一个处理程序上的文件，它会处理事件，从它的后代，即使附加处理程序后，他们创建：

$(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 2

您想使用的功能.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 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()也是一个不错的选择，如果你使用第三方脚本，并且需要查看哪里出了问题。