javascript 在 AJAX 调用后函数内document.ready()

vxqlmq5t  于 2022-10-30  发布在  Java
关注(0)|答案(2)|浏览(155)

我有一个使用 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结构中添加了一段新代码。在执行代码以附加所有事件处理程序之前,我是否应该调用loadPage1Script()中的$(document).ready();?如果不这样做,会有什么不同吗?如果添加$(document).ready();,脚本启动速度会更快吗?

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

取自jQuery站点(http://api.jquery.com/ready/):

  • 在大多数情况下,一旦DOM层次结构完全构建好,就可以运行脚本.传递给.ready()得处理程序保证在DOM准备好后执行,因此这通常是附加所有其他事件处理程序与运行其他jQuery代码得最佳位置.*
bejyjqdl

bejyjqdl1#

如果在已经调用loadpage函数之后调用该函数,

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

而且,由于$.fn.html函数不是异步的,因此直接运行loadPageScript函数也不会有问题

ozxc1zmp

ozxc1zmp2#

不需要在这些函数中使用$(document).ready(),因为在运行这些函数时,它们所需的DOM元素已经存在(您只是在调用函数之前将它们插入到页面中)。
但是,您应该在$(document).ready()内调用原始的loadPage函数,以确保.container元素存在。

相关问题