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(){});
But they don't work on the AJAX loaded content. I have read that this is because the selectors that I am using are not available.
Is there a better way to do this? Adding the script to the window.load function doesn't work either:
$(window).load(function() {});
$(document).ajaxComplete(function(){
// fire when any Ajax requests complete
})
There are more than one option:
$(this).click... ] into callback function of $.load()$.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
$.live() for dynamically created objects. api.jquery.com/live
live function, which is the equivalent of bind, but works for dynamically created elements.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.
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
