Can I call $(document).ready() to re-activate all

问题:

Does anyone happen to know IF and HOW I could re-call all on-load event handlers? I'm referencing some .js files that I DON'T have control over, and these .js libraries do their initialization in $(document).ready(), and unfortunately don't provide any easy function to re-initialize.

I'm currently trying to replace a large div block with content from an ajax call, and so I have to re-initialize the external libraries. So, it would be nice just to call $(document).ready() in order to re-initialize EVERYTHING.

So far, I've tried this on the ajax call:

success: function(data) {
    alert('1'); // Displays '1'
    $('#content').html(data);
    alert('2'); // Displays '2'
    $(document).ready();
    alert('3'); // Does not display
}

Calling $(document).ready(); fails quietly too. JavaScript console shows no errors. Does anyone know if this is possible (without modifying javascript library files)?

回答1:

Since you asked how to do it without modifying the external JS files, I'll answer that way. I've traced through the .ready() function in jQuery in the debugger and it appears that the root function that gets called when the page is ready is this:

jQuery.ready();

But, it appears you cannot just call it again to accomplish what you want because it appears that when it fires the first time, it unbinds from the functions that were previously registered (e.g. forgetting them). As such, calling jQuery.ready() manually a second time does not retrigger the same function calls again and I verified that in the debugger (breakpoint was only hit once, not second time).

So, it appears that you cannot solve this problem without either changing the jQuery implementation so it doesn't unbind (to allow multiple firings) or changing each piece of ready handler code to use your own events that you can fire as many times as you want.

回答2:

I did something like:

// When document is ready...
$(function(){
    onPageLoad();
});

function onPageLoad(){
  // All commands here
}

Now I can call this function anytime I need.

回答3:

A simple way to achieve this is just to invent your own event like this:

$(document).bind('_page_ready', function() { /* do your stuff here */});

Then add this:

$(function() { $(document).fire('_page_ready'); }); // shorthand for document.ready

And last, whenever you need to run it again you simply call this:

$(document).fire('_page_ready');

[Edit]

If you really can't edit the external script-files I've made a jsFiddle that makes what you want to do possible, you can take a look at the code here: http://jsfiddle.net/5dRxh/

However, if you wan't to use this, it's important that you add this script RIGHT AFTER you include jQuery, like this:

<script src="jquery.js" type="text/javascript"></script>
<script>
    //script from jsFiddle (only the plugin part at the top).
</script>
<!-- All the other script-files you want to include. -->

回答4:

I don't think that this can be done since jquery unbinds the ready event after it is executed. From the source:

// Trigger any bound ready events
if ( jQuery.fn.trigger ) {
    jQuery( document ).trigger( "ready" ).unbind( "ready" );
}

回答5:

You can do this simple.

Make a function:

function REinit() {
        /// PLACE HERE ALL YOUR DOC.READY SCRIPTS
}

Place just the Reinit() function inside doc.ready:

$(document).ready(function(){
    REinit();
});

then after an ajax action just call

REinit();

回答6:

You can trigger document.ready second time if you change entire body content:

$('body').html($('body').html())

回答7:

I think it is straight forward to just change the ready event to pjax success

Change it from:

$(document).ready(function() {
    // page load stuff
});

To:

$(document).on('ready pjax:success', function() {
    // will fire on initial page load, and subsequent PJAX page loads
});

回答8:

This will be what you want, just hold the ready event until you are really ready.

https://api.jquery.com/jquery.holdready/

回答9:

Or, try this:

jQuery.extend ({

    document_ready: function (value) {
        $(document).ready (value);
        $(document).ajaxComplete (value);
    }/* document_ready */

});

And instead of defining a function by saying:

$(document).ready (function () { blah blah blah });

say:

jQuery.document_ready (function () { blah blah blah });

Explanation:

Any function loaded to "document_ready" will be automatically loaded into both "$(document).ready ()" and "$(document).ajaxComplete ()" and will fire under both circumstances.

回答10:

I just had the problem that my ajax code only worked if it gets called by the $(document).ready(function(){}); and not in a regular function, so I couldn't wrap it.
The code was about loading a part of my page and because of some loading errors I wanted it to be called again after a timeout.

I found out that the code doesn't have to be in the $(document).ready(function(){}); but can be run by it and can also be called by itself.

So after I read many solutions from different pages now I've got this code mixed together:

---

$(document).ready(loadStuff);   

---

function loadStuff(){   
    $.ajax({
        type: "POST",
        url: "path/to/ajax.php",
        data: { some: data, action: "setContent"},
        timeout: 1000, //only one second, for a short loading time
        error: function(){ 
            console.log("An error occured. The div will reload.");
            loadStuff(); 
        },
        success: function(){
            $("#divid").load("path/to/template.php"); //div gets filled with template
        }
    });
}