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

Question

有谁知道我是否以及如何重新调用所有加载事件处理程序？我引用了一些我无法控制的 .js 文件，这些 .js 库在 $(document).ready() 中进行初始化，不幸的是没有提供任何简单的函数来重新初始化。

我目前正在尝试用 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库文件）？

Answer 1

既然你问如何在不修改外部JS文件的情况下做到这一点，我就这样回答。我已经在调试器中跟踪了 jQuery 中的 .ready() 函数，看起来页面准备好时调用的根函数是这样的：

jQuery.ready();

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

因此，如果不更改 jQuery 实现，使其不会取消绑定（以允许多次触发），或者更改每段就绪处理程序代码以使用您自己的事件（您可以多次触发），则似乎无法解决此问题想。

Answer 2

我做了类似的事情：

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

function onPageLoad(){
  // All commands here
}

现在我可以在需要时随时调用这个函数。

Answer 3

实现此目的的一个简单方法就是创建自己的事件，如下所示：

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

Answer 4

如果更改整个正文内容，则可以第二次触发 document.ready：

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

Answer 5

我不认为这是可以做到的，因为 jquery 在执行后解除了就绪事件的绑定。从源头看：

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

Answer 6

你可以做这个简单的事情。

创建一个函数：

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

将 Reinit() 函数放入 doc.ready 中：

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

然后在 ajax 操作之后调用

REinit();

Answer 7

我认为直接将就绪事件更改为 pjax success

将其从： 更改

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

为：

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

Answer 8

这将是您想要的，只需保留就绪事件，直到您真正准备好为止。

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

Answer 9

或者，尝试这个：

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 ( )”并且在两种情况下都会触发。

Answer 10

我刚刚遇到的问题是，我的 ajax 代码仅在被 $(document).ready(function(){}); 调用时才起作用； 而不是在常规函数中，所以我无法包装它。
该代码是关于加载页面的一部分的，由于一些加载错误，我希望在超时后再次调用它。

我发现代码不必位于 $(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
        }
    });
}