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?

Answer 1

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