jQuery - document.ready not firing when content loaded with AJAX

Question

I have a simple custom tabbing module, that loads tabs with an AJAX request (via $(elem).load()). On each page that is loaded with AJAX I have some JavaScript. The first time the page loads (via direct input of URL, not AJAX), the javascript fires up perfectly. When I navigate away from the page via the AJAX tabs, the javascripts from the pages aren't loading anymore.

Is there any way I can force them to execute?

(The javascript that is not firing is placed in a $(document).ready() function if that helps)

Answer 1

You need to use callback of load() function:

$(elem).load('source.html', function() { 
    // here you need to perofrm something what you need
    ActionOnDocumentReady();
});

You can put all your actions in $(document).ready into some function (ex ActionOnDocumentReady()) and call it on load() callback.