Loading dynamic content with AJAX breaking jQuery

So if you say there are no errors, I’m assumming that your problem is the AJAX request changing the DOM, and your scripts being loaded before that.

If the document changes, you’ll need to tell your scripts that, so they will fire their events on the new content.

So:

• Either you reload all scripts again after the AJAX updated the document (then you should put your script tags inside the element that’s being changed) – this is ugly

• Or use live(), or livequery() in your scripts to scan for document changes. For eg:

  $(".bla").click(function(){ ... })

  should be changed to

  $(".bla").live('click', function(){ ... }

from the jquery API, live():

Description: Attach a handler to the
event for all elements which match the
current selector, now and in the
future.

update:

The tabify script is initiated in the
document.ready section in the header
this way: $(‘#caseSections’).tabify();
and is used on secondary pages (the
pages that are loaded via ajax into
the homepage via a button click).

So tabify will be applied to the #caseSections selector from the initial document. I assume that this works. Your prooblem is that it stops working after the AJAX updates the page, right?

Solutions:

1. Since it’s not set to be fired on a particular event, you’ll need to install & enqueue the livequery script I mentioned above. Then change $('#caseSections').tabify(); with:

   $('#caseSections').livequery(function(){ $(this).tabify(); });

2. Simply call $('#caseSections').tabify(); again after the AJAX completes, in the “success” function.