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

Question

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

在页面加载时，动态创建的 div 从 localStorage 加载。带有 uniqiue id 和一个取决于 div 的公共(public)类，我同时调用了一个函数，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，函数就会被调用多少次，但也意味着点击 <button>在 div .two会提醒 .two <textarea> .val() 三次。

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 的内容 div 中，你会这样做:

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

你也只需要这段代码运行一次，所以不需要把它放在一个被调用多次的函数中。只需将其放入您的 $(document).ready(....) 即可。

fiddle :http://jsfiddle.net/gromer/dxbqz/