Question

我有一个使用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代码的最佳位置。“

Answer 1

如果在调用

之后调用loadpage函数

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

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

Answer 2

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

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

document.ready（）在一个函数内部和Ajax调用之后

2 个答案: