Question

可能重复：
  dynamically added class can’t be called
  jquery does not select jquery added element

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

示例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');
    });

});

Working DEMO

Answer 2

在处理动态创建的元素时使用事件委派，并尝试避免过度使用文档或document.body来处理大型文档上的委托事件 - 请参阅{{3 }}

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

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

2 个答案: