0

重複の可能性:
動的に追加されたクラスを呼び出すことができません
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">アラートがトリガーされるはずですが、トリガーされません。適切に行う方法は？

4

2 に答える 2

3

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

});​

ワーキングデモ

于 2012-11-25T19:04:30.423 に答える
0

動的に作成された要素を処理する場合はイベント委任を使用し、大きなドキュメントで委任されたイベントに document または document.body を過度に使用しないようにしてください - 参照を参照してください。

$('#items').on("click", ".foo", function() {
    alert('tst');
});
于 2012-11-25T19:13:06.193 に答える