jquery - jQuery 无法识别动态添加到页面的类

Question

我正在做一个项目，我想将同一类的许多元素添加到页面中，并使所有这些类都可以通过 $('selector').click(); 访问。事件处理程序。但是，发生的事情是同一类的动态添加的元素都没有响应点击。

为了让您更好地理解我的意思，我制作了一个示例 jsFiddle，它与我项目中的实际问题非常相似：

链接到 jsFiddle：http: //jsfiddle.net/8LATf/3/

如何使“added_element”类的所有元素都可点击？我猜这与我在事件处理程序中使用的选择器有关，但我无法弄清楚。

任何帮助深表感谢！！！

score 11 · Accepted Answer

您需要委托您的处理程序。最简单的方法是将所有内容委托给documentusing .on('click', ...)（这是.live()内部转换的方式，从 jQuery 1.7 开始）：

$(document).on('click','.added_element',function() {
    var id = $(this).attr('id');
    alert(id);    
});

但是，在您的情况下，您可以委托给#container，因为所有添加的元素都出现在其中。在可能的情况下，出于效率原因，最好委托给最接近的 DOM 元素。

$('#container').on('click','.added_element',function() {
    var id = $(this).attr('id');
    alert(id);    
});

score 0 · Accepted Answer

您需要在这里使用事件委托，绑定事件的正确方法是：

$('#container').on('click', '.added_element', function() {
    var id = $(this).attr('id');
    alert(id);
});

score -1 · Accepted Answer

当您将事件处理程序附加到“add_element”时，通过脚本动态创建的事件处理程序不在 DOM 中。所以没有绑定到新创建的元素的事件处理程序。

要解决此问题，请将事件处理程序附加到包含 div，并使其查找“added_element”。

3 回答 3