jQuery 不识别动态添加到页面的类

Question

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

为了让您更好地理解我的意思，我编写了一个示例 jsFiddle，它与我元素中的实际问题非常相似:

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

• “added_element”类的一个元素在加载时已经在页面上。该元素是可点击的。

• 单击一个按钮，它使用追加将类“added_element”的其他元素动态添加到页面。这些元素都不可点击。

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

非常感谢任何帮助!!!

Answer 1

You need to delegate your handler .最简单的方法是使用 .on('click', ...) 将所有内容委托(delegate)给 document (从 jQuery 1.7 开始，这就是 .live() 内部转换的方式):

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

​http://jsfiddle.net/mblase75/8LATf/4/

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

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

​http://jsfiddle.net/mblase75/8LATf/5/