Cannot Bind Event Listener to Dynamically Created Elements

Question

I'm trying to add an event listener to dynamically created elements, but am having trouble doing so. In my code below, I can never detect that <p> has been inserted so I never see the console message Bar Inserted. Am I doing somethign incorrectly?

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>

bobthecow · Accepted Answer · 2013-03-07 01:23:38Z

1

When you first attach the listeners, $('p') doesn't select anything (since there isn't a p on the page yet). You should attach the listener to the parent, #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>

answered Mar 7, 2013 at 1:23

bobthecow

5,13728 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Cannot Bind Event Listener to Dynamically Created Elements

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related