0

動的に作成された要素にイベント リスナーを追加しようとしていますが、うまくいきません。以下のコードでは、それ<p>が挿入されたことを検出できないため、コンソール メッセージは表示されませんBar Inserted。私は何か間違ったことをしていますか？

http://jsfiddle.net/3msVK/

    $('#button').click( function() {
        $('#foo').append('<p>foo</p>');
        $('p').append('<p>bar</p>');
    });  
    $('#foo').bind('DOMNodeInserted', function() {
        console.log('Foo Inserted');
    });  
    $('p').on('DOMNodeInserted', 'p', function() {
        console.log('Bar Inserted');
    });    

    <div id="foo">Foo</div>
    <div id="button">BUTTON</div>
4

1 に答える 1

1

最初にリスナーをアタッチすると、$('p')何も選択されません (pまだページに がないため)。リスナーを親にアタッチする必要があります#foo。

$('#button').click( function() {
    $('#foo').append('<p>foo</p>');
    $('p').append('<p>bar</p>');
});  
$('#foo').bind('DOMNodeInserted', function() {
    console.log('Foo Inserted');
});  
$('#foo').on('DOMNodeInserted', 'p', function() {
    console.log('Bar Inserted');
});    

<div id="foo">Foo</div>
<div id="button">BUTTON</div>
于 2013-03-07T01:23:38.973 に答える