Question

Say I have this code:

$(document).ready(function()
{
   $(".foo").click(processFooClick);
}

Once the document has loaded, then via javascript I dynamically add a new div with foo class to the document:

$("body").append( "<div class='foo'>click..</div>");

Would this new div also have the event handler automatically applied to it, or would I need to run the event setting code ( $(“.foo”).click(…) ) again?

Would using jquery’s live function help with this? If so, how?

Answer 1

Your first method would not work, take a look at this jsFiddle: http://jsfiddle.net/esN4Q/

But, live would:

$(".foo").live('click', processFooClick);

jsFiddle Example of jQuery live: http://jsfiddle.net/ePmXU/ (I added an alert pop up in the jsFiddle so we can see if it works when it’s clicked.)