Question

我正在尝试为动态创建的元素添加事件侦听器，但是我很难这样做。在我下面的代码中，我永远无法检测到<p>已插入，因此我从未看到控制台消息Bar Inserted。我做错了吗？

    $('#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）。您应该将监听器附加到父#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>

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

1 个答案: