我可以调用$(document).ready()来重新激活所有on load事件处理程序吗?

时间:2011-08-21 01:18:35

标签: javascript jquery onload

有没有人碰巧知道IF以及我如何重新调用所有的on-load事件处理程序?我正在引用一些我无法控制的.js文件,这些.js库在$(document).ready()中进行初始化,遗憾的是,它们没有提供任何简单的函数来重新初始化。 / p>

我目前正在尝试使用ajax调用中的内容替换大型div块,因此我必须重新初始化外部库。因此,只需调用$(document).ready()以重新初始化一切就好了。

到目前为止,我已经在ajax调用上尝试了这个:

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

呼叫$(document).ready();也会安静地失败。 JavaScript控制台显示没有错误。有谁知道这是否可行(不修改javascript库文件)?

10 个答案:

答案 0 :(得分:37)

既然你问过如何在不修改外部JS文件的情况下这样做,我会回答这个问题。我在调试器中跟踪了jQuery中的.ready()函数,看起来在页面准备就绪时调用的根函数是:

jQuery.ready();

但是,看起来你不能再调用它来完成你想要的东西,因为它似乎在它第一次触发时,它与之前注册的函数(例如忘记它们)解除绑定。因此,第二次手动调用jQuery.ready()不再重新触发相同的函数调用,我在调试器中验证了(断点只被击中一次,而不是第二次)。

所以,看来如果不更改jQuery实现就无法解决这个问题,因此它不会解除绑定(允许多次触发)或更改每个就绪处理程序代码以使用您自己可以触发的事件你想要的时间。

答案 1 :(得分:29)

我做了类似的事情:

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

function onPageLoad(){
  // All commands here
}

现在我可以随时调用此功能。

答案 2 :(得分:12)

实现这一目标的一个简单方法就是发明你自己的事件:

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

然后添加:

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

最后,无论何时你需要再次运行它,你只需要调用它:

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

[编辑]

如果你真的无法编辑外部脚本文件我已经创建了一个jsFiddle,可以让你想做的事情,你可以看看这里的代码:http://jsfiddle.net/5dRxh/

但是,如果你不想使用它,那么在你包含jQuery之后添加这个脚本是很重要的,如下所示:

<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. -->

答案 3 :(得分:5)

我不认为这可以做到,因为jquery在执行后取消绑定ready事件。来自消息来源:

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

答案 4 :(得分:3)

如果更改整个身体内容,您可以第二次触发document.ready:

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

答案 5 :(得分:2)

我认为直接将ready事件更改为pjax成功

从以下位置更改:

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

要:

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

答案 6 :(得分:2)

你可以这么做。

创建一个功能:

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

只将Reinit()函数放在doc.ready:

REinit();

然后在ajax动作之后调用

{{1}}

答案 7 :(得分:1)

这将是您想要的,只需保持准备好的事件,直到您准备好。

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

答案 8 :(得分:0)

或者,尝试以下操作:

jQuery.extend ({

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

});

而不是通过以下方式定义函数:

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

说:

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

说明:

任何加载到“ document_ready”的函数都将自动加载到“ $(document).ready()”和“ $(document).ajaxComplete()”中,并且在两种情况下均会触发。

答案 9 :(得分:0)

我只是遇到我的ajax代码仅在被$(document).ready(function(){});而不是常规函数调用的情况下才起作用的问题,所以我无法包装它。
 该代码与加载页面的一部分有关,并且由于某些加载错误,我希望在timeout之后再次调用它。

我发现代码不必位于$(document).ready(function(){});中,但可以由它运行,也可以由自身调用

因此,在我从不同的页面上阅读了许多解决方案之后,现在我将这段代码混合在一起了:


$(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
        }
    });
}