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

Question

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

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

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

• 类"added_element"的一个元素在加载时已经在页面上.此元素是可单击的.

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

如何使"added_element"类的所有元素都可以点击？我猜它与我在事件处理程序中使用的选择器有关,但我无法弄明白.

任何帮助深表感谢!!!

Answer 1

您需要委派您的处理程序.最简单的方法是将所有内容委托给document使用.on('click', ...)(这是.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/