jquery - 在 Jquery 中访问动态添加的元素

Question

可能重复：
动态添加的类不能被调用
jquery不选择jquery添加的元素

我正在尝试通过类名访问动态添加的元素，但不能。

示例 HTML：

<div class="foo">static foo (click to trigger alert)</div>
<br />
<br />
<a id="add">add dynamic foo</a>
<br />
<div id="items"></div>

示例 Jquery：

$(function(){

    var c = 1;

    $('#add').click(function() {

        $('#items').append('<div style="background:red" id="item' + c + '">\n\
                                Hello World ' + c + '\n\
                            </div>\n\
                            <div class="foo">dynamic foo ' + c + 'clicking me should alert?</a>');

        c++;

    });

    $('.foo').click(function() {
        alert('tst');
    });

});

演示：http: //jsfiddle.net/D3gGH/

正如您在演示中看到的那样，单击动态添加<div class="foo">应该会触发警报，但不会。如何正确地做到这一点？

Answer 1

on改为使用click

$(function(){

    var c = 1;

    $('#add').click(function() {

        $('#items').append('<div style="background:red" id="item' + c + '">\n\
                                Hello World ' + c + '\n\
                            </div>\n\
                            <div class="foo">dynamic foo ' + c + 'clicking me should alert?</a>');

        c++;

    });

    $(document).on('click','.foo', function(e) {
        alert('tst');
    });

});​

工作演示

Answer 2

在处理动态创建的元素时使用事件委托，并尽量避免在大型文档上的委托事件中过度使用 document 或 document.body - 请参阅参考资料。

$('#items').on("click", ".foo", function() {
    alert('tst');
});