I've been using jQuery's $.ready()
function for initialisation when loading webpages, but some of the pages dynamically load content later via $.ajax()
calls long after the $.ready()
call has completed.
The problem is I need an equivalent ready() function to initialise the dynamic content - I can't use $('.sel').ready()
because ready()
only applies to the document as a whole and attempting to initialise the content from $ajax.success()
randomly fails because it appears some DOM elements in the dynamic content have not always loaded.
$.ready(function() {
// init document here, then much later...
$.ajax({
url:/getdynamicstuff,
success:function(dyndata) {
// container is part of the main body, so this always works
$('.container').html(dyndata);
// try and use ready again once the container DOM is loaded...
$().ready(function() {
// this commonly (but not always) fails because $('.dynelement').length is 0 (i.e the element is not yet in the DOM)
$('.dynelement').click();
});
}
});
});
How do I trigger a callback once all the dynamic DOM elements have fully loaded?