在 Ajax 调用之后的函数内部的 document.ready()答案

【问题标题】：document.ready() inside a function after and Ajax call在 Ajax 调用之后的函数内部的 document.ready()
【发布时间】：2013-02-07 20:32:39
【问题描述】：

我有一个使用 ajax 调用来加载内容的应用程序。那些 ajax 调用只检索 HTML。 Javascript 在另一个文件中。

完成 AJAX 调用后，我将调用一个应尽快开始执行 javascript 的函数。

这里我留下一个小函数，它将从 ajax 调用中检索一些代码。

function loadPage(page) {
    $(".container").html("");
    if(page == "page1") {
        $.ajax({
            url: "/page1.php",
            success: function(html){
                $(".container").html(html);
                loadPage1Script();
            } 
        });
    }else if(page == "page2"){
        $.ajax({
            url: "/page2.php",
            success: function(html){
                $(".container").html(html);
                loadPage2Script();
            } 
        });
    }
}

之后，他们会执行 loadPage1Script() 或 loadPage2Script()。

function loadPage1Script(){
    //Start the carousel plugin, for example
}

新代码已添加到 HTML 结构中。我应该打电话给 $(document).ready();在执行代码之前在 loadPage1Script() 中附加所有事件处理程序？如果我不这样做有什么不同吗？如果我添加 $(document).ready(); 脚本会更快启动吗？ ?

function loadPage1Script(){
    $(document).ready(function(){
        //Start the carousel plugin, for example
    });
}

取自 jquery 网站(http://api.jquery.com/ready/)：

"在大多数情况下，脚本可以在 DOM 层次结构完全构建后立即运行。传递给 .ready() 的处理程序保证在 DOM 准备好后执行，因此通常是附加所有其他事件处理程序并运行其他 jQuery 代码的最佳位置。"

【问题讨论】：

标签： javascript jquery javascript-events

【解决方案1】：

如果您在 aleady 调用后调用 loadpage 函数

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

那应该没关系。此外，由于$.fn.html 函数不是异步的，因此您可以立即运行loadPageScript 函数

【讨论】：

【解决方案2】：

没有必要在这些函数中使用$(document).ready()，因为在它们运行时，它们需要的 DOM 元素已经存在（您只是在调用函数之前将它们插入到页面中）。

但是，您应该调用 $(document).ready() 内部的原始 loadPage 函数，以确保存在 .container 元素。

【讨论】：