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

Question

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

为了让你更清楚地了解我的意思，我编写了一个示例jsFiddle，它与我项目中的实际问题非常相似：

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

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

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

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

非常感谢任何帮助!!!

Answer 1

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

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

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

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

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

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

Answer 2

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

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

这是corrected fiddle。

Answer 3

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

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

jfiddle： http://jsfiddle.net/yKJny/