jquery - 无法将事件侦听器绑定到动态创建的元素

Question

我正在尝试将事件侦听器添加到动态创建的元素中，但这样做时遇到了麻烦。在下面的代码中，我永远无法检测到它<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>

Answer 1

当您第一次附加侦听器时，$('p')不选择任何内容（因为p页面上还没有 a ）。您应该将侦听器附加到父级，#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>