How to trigger $().ready() in jQuery?

Question

Using jQuery, is there a way to retrigger the document.ready trigger at some point after a page has loaded?

Update: jQuery sheds them once they are run. In my experiments it looks like jQuery will run a ().ready callback as soon as it is encountered once the initial ready event is triggered.

Answer 1

If you just need to make sure that new initialization functions get run, you don't need to do anything. When you add a new event handler in $().ready, after the document finishes loading, it will run immediately.

Apparently, calling $().trigger("ready") directly doesn't work because jQuery resets the ready event handlers after it runs them. You will need to keep track of the functions you need to call, and call them directly as below.

Of course, it might be better to just call the function directly, so you don't re-run something you didn't intend to (some plugins might have their own $().ready() functions that they don't expect to run twice).

$().ready(initializationFunction);

// later:
initializationFunction(jQuery);

Answer 2

You can do something like this:

$(document).on('ready readyAgain', function() {
    // do stuff
});

// At some other point in time, just trigger readyAgain
$(document).trigger('readyAgain');

Note:

$(document).on('ready') has been deprecated in jQuery 1.8 according to documentation. An alternative method is as follows:

function myReadyFunction(){}
$(myReadyFunction);

// at some other point, just call your function whenever needed:
myReadyFunction($);

Answer 3

What if you tried building a module execution controller right into the ready function? Kind of like this:

https://gist.github.com/miguel-perez/476046a42d229251fec3

Answer 4

In some cases you need to add more code (scripts) in another places of the code, so creating a function limit you to write all the code in the same area. This why I prefer to add my custom events, and then trigger them:

//Add a page Ready custom event
$( document ).on( "page.ready", function( event ) {
    //Your Ready Scripts
});

//Add a page Load custom event
$( document ).on( "page.load", function( event ) {
    //Your Load Scripts
});

//Trigger Ready scripts on page ready
jQuery(function($) {
    $( document ).trigger( "page.ready" );
});

//Trigger Load scripts on page load
$(window).load(function () {
    $( document ).trigger( "page.load" );
});

//Trigger the Custom events manually
$( document ).trigger( "page.ready" );
$( document ).trigger( "page.load" );

https://learn.jquery.com/events/introduction-to-custom-events/

Answer 5

Aaron - what would you be trying to accomplish, reinitializing variables?

Edited... The beauty of jQuery in my opinion is the call back functions. Why not just have some action/function executed after the event.

Answer 6

I can see one scenario where this would be very useful, that is if you delay loading jQuery until everything else has loaded, then you dynamically append a new script element to load jQuery.

In this case, $(document).ready is not always triggered, since in many cases the document will have completely loaded before jQuery is done loading and has set up the right event handlers.

You could use named functions and call those instead, but it would still break any plugin that relies on $(document).ready.

Answer 7

If it helps you:

var document_on_ready = new Array();

function on_ready(){
   for(i=0;i<document_on_ready.length;i++){
      document_on_ready[i].call();
   }
}
$(function(){
   on_ready();
});

var counter = 0;
document_on_ready.push(function(){
   counter++;
   console.log('step1: ' + counter);
});

document_on_ready.push(function(){
   counter++;
   console.log('step2: ' + counter);
});

window.setTimeout(on_ready,1000);

Answer 8

Easy: you just need to disable the safety-flag jQuery.isReady. Set jQuery.isReady to false and use jQuery(document).trigger('ready') to re-trigger this event. That's quite useful for turbolinks-style navigation.

Answer 9

ASP.Net UpdatePanel partial page loads are another place where one might want to re-trigger loading functionality - not that $().ready is the right place to do that. In that case, you can either use page_load or the MS framework's endrequest event.

Answer 10

You should be able to with document.ready.apply();