Question

在我的html文件中，我正在加载两个执行dom操作的外部javascript文件，第一个只是在html中准备页面（注入一些div和内容）。第二个找到那些刚刚注入的div，然后尝试用它做一些事情。

var app = {
    init: function () {
        // event handler goes here
        app.alertMe('Hello');
        app.loadContent();
        app.insertDiv();
    },
    loadContent: function() {
        $('#div1').load('../html/demo_test.html');
    },
    insertDiv: function() {
        $('#div2').append('<strong>YEEEEEEAP</strong>');
    },
    alertMe: function(a) {
        alert(a);
    }

};

$(function () {
    app.init();
})

第二个是this bootstrap库。我的html文件如下

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>A</title>
            <script type="text/javascript" src="page_prep.js">
    </script>
    </head>
    <body>
        body
    </body>
    <script type="text/javascript" src="bootstap_lib.js">
</html>

虽然我按正确的顺序加载了顺序，但是在我的custom.js之前，库似乎正在加载，这导致操作不起作用，因为找不到需要存在的div。经过仔细的调试证明，div之后会被注入。

可能出现这种情况的原因是什么？

Answer 1

您正在推迟注入，直到页面完成加载，一旦浏览器下载，引导脚本就会立即运行。

将脚本文件移到yout bootstrap脚本之上，然后更改：

$(function () { //This defers execution
    app.init();
})

到此：

app.init(); //This executes immediately

JavaScript加载顺序和匿名函数

1 个答案: