Cannot control content added dynamically with .load

Question

I have content that I'm loading using an AJAX call and displaying the HTML (consisting of divs, etc) inside of a ul parent.

Now I've written a series of .click and .hover functions that work perfectly on everything, right up to where my content is dynamically loaded, and then don't work at all on the dynamically-loaded content.

I've gone through all my div ids to make sure they are correct and they are. Is there a way to gain control over the AJAX-loaded material?

you need to assign .click or .hover to does elements after they are created — Ibu, Jul 03 '11 at 21:52

score 0 · Answer 1 · answered Jul 03 '11 at 21:54

Your event handlers are bound to elements that exist at the time that they are set.

Either re-attach the handlers to the new, dynamically-created material, or make use of live or delegate; these "attach a handler to the event for all elements which match the current selector, now and in the future".

score 0 · Accepted Answer · answered Jul 03 '11 at 22:01

The problem is that your code run only with the elements that existed at that time and no the "future" elements. You have 2 choices:

1) Re-run your "onload" javascript code (that was applied on document ready) after you load your ajax content.

2) Use .live() instead of .bind(): So change

$('#selector').bind('click', function(){..

To

$('#selector').live('click',function(){..

The difference is that live uses the elements that match the selector now and in the future, versus bind uses the elements that match the selector only at the time it's called.

Hope this helps. Cheers

score -1 · Answer 3 · answered Jul 03 '11 at 21:53

You should either rebind the events after the content is loaded or use

.delegate (api) to have the event attached automatically to newly loaded elements.

something like:

$("ul#container").delegate("li", "hover", function(){
    doStuff();
});
$("ul#container").delegate("li", "click", function(){
    doOtherStuff();
});

score -1 · Answer 4 · answered Jul 03 '11 at 21:55

-1

Change

$('a#whatever').click(function(){....

To

$('a#whatever').live('click',function(){....

answered Jul 03 '11 at 21:55

AlienWebguy

76,997
17
122
145

`live` is inferior to `delegate` and should probably not be advised: http://stackoverflow.com/questions/4579117/jquery-live-vs-delegate – Variant Jul 03 '11 at 21:59
live is not the same as delegate. they each have their own optimal usage. – AlienWebguy Jul 03 '11 at 22:13
I agree that live has its usages. In this case its not. – Variant Jul 03 '11 at 22:14

Cannot control content added dynamically with .load

4 Answers4