Cannot set click event handler on dynamically created content

Question

I have some code like this:

$('.play').on( 'click', function(){
    console.log('click');
});

The .play element is dynamically created with $('.game').html('<span class="paly">Play</span>') method. However, I have nothing in my console log when I'm clicking on this span. What am I doing wrong?

Thanks.

PS: I am using jQuery 1.7.1

Answer 1

Don't use live() - it has been deprecated. Instead use on(), but use it on a parent element to delegate the event to, like this:

$('#parentOfPlay').on('click', '.play', function(){
    console.log('click');
});