Jquery文档准备在动态加载的HTML上提前启动

Jquery document ready on dynamically loaded HTML fires early

本文关键字：HTML 启动 加载 文档 动态 Jquery      更新时间：2023-09-26

我正在加载如下动态内容:

$('#my-div').load('my.html');

在my.html里面是这样的代码

<html>
    <head>
    </head>
    <body>
        <script>
            $(function(){
                alert('should fire later');});
        </script>
    </body>
    <script>
        alert('should fire first!');
    </script>
</html>

最初my.html是加载在iframe中，一切都很好。

然而，为了重构和现代化的代码，它被改为使用ajax加载。但是，现在执行的顺序颠倒了，因为从技术上讲，ready事件已经在父页面上触发了。

这样做的问题是存在依赖关系，这些依赖关系要求事件以正确的顺序触发。我也在犹豫是否要将脚本块移动到更高的位置，因为这段代码被过度重用，我不知道还有什么会中断。虽然在烟雾测试中，移动脚本块在我正在工作的一个页面上工作。

是否有一个使用jquery ajax加载并保持脚本执行的原始预期顺序?

试试这个:

<html>
    <head>
    </head>
    <body>
        <script>
            function later () {
                alert('should fire later');
            }
        </script>
    </body>
    <script>
        alert('should fire first!');
        later();
    </script>
</html>

如果像这样检查加载状态会发生什么?

<html>
    <head>
    </head>
    <body>
        <script>
            jQuery(window).load(function () {
        alert('page is loaded');
    });
        </script>
    </body>
</html>

但是，您可以使用以下方法检查Ajax加载状态:

 $( document ).ajaxComplete(function( event,request, settings ) {
$( "#my-div" ).append( "<span>Request Complete.</span>" );
});
你可以在这里找到有用的信息:AjaxComplete()
相关文章：