Attaching JQuery Events to “on the fly created” controls

Question

I'm appending to an existing div in my page. The appended text contains html code in string. The problem is, events aren't working when I add click on them after appending to page. I guess Jquery loads control on page load and I have to do something to attack the events again.

Answer 1

Try to use .live() or .delegate for this purpose.

Answer 2

You are missing delegate().

So if you run

$('#workingArea a.doAction').bind('click', function(){
    // do stuff
});

or the equivalent

$('#workingArea a.doAction').click(function(){
    // do stuff
});

Any a's loaded after that runs don't get the event.

If instead you do

$('#workingArea').delegate('a.doAction', 'click', function(){
    // do stuff
});

then those events will be captured for any and all future a.doAction elements that get added, as long as #workingArea exists when it is run.