Question

我正在加载动态内容，如下所示：

$('#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中，并且everthing很好。

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

问题在于存在依赖关系，需要以正确的顺序触发事件。我也犹豫是否要将脚本块向上移动，因为这段代码被过度重用，我不知道还有什么会破坏。虽然在冒烟测试中，移动脚本块可以在我正在处理的一个页面上运行。

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

Answer 1

试试这个：

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

Answer 2

如果你像这样检查负载状态会怎样？

<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()

准备动态加载HTML的Jquery文档会提前触发

2 个答案: