jQuery trigger when inner html DOM ready

274 views Asked by At

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?

0

There are 0 answers