Running JQuery scripts on AJAX loaded content

Question

I am using .load() to pull static HTML files onto my main HTML page. The scripts and selectors that I have written exist within:

$(document).ready(function()         


        

Answer 1

jQuery load takes an optional callback function argument which you could use to do any setup you need AFTER your ajax-ed content is loaded

Answer 2

You can bind events to dynamically loaded content via jQuery's $.live().

From jQuery http://api.jquery.com/live/:

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

Answer 3

There are more than one option:

1. you can add initialization scripts [ $(this).click... ] into callback function of $.load()
2. you can use $.live(), which creates handlers even for dynamically loaded/created objects.

More here:
callback: http://api.jquery.com/load/ (notice the "complete()" function)
bind: http://api.jquery.com/live/

Edit: My mistake, it was live(), not bind(), thank you guys

Answer 4

$(document).ajaxComplete(function(){
    // fire when any Ajax requests complete
})

ajaxComplete()