Question

Possible Duplicate:
dynamically added class can’t be called
jquery does not select jquery added element

I’m trying to access dynamically added element via class name but couldn’t.

Sample 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>

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

});

Demo: http://jsfiddle.net/D3gGH/

As you can see in the demo, clicking the dynamically added <div class="foo"> should trigger alert but it doesn’t. How to do it properly?

Answer 1

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

});​

Working DEMO