用javascript加载元素，然后用javascript应用它们

我正在尝试使用jquery.load（“文件”）函数加载“header.html”，将css应用于加载的元素（工作），然后将JS应用于加载的元素，如滚动上的浮动菜单等功能，但这不起作用。这是我导入头部文件的顺序：

<!-- Elements going to be loaded are using this font-awesome css
so they must be loaded before anything -->
<link rel="stylesheet" href="awesome/css/font-awesome.min.css" />

<!-- Then importing the jquery -->
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

<!-- This is the point where i load the header.html -->
<script src="js/indexLoad.js"></script>

<!-- Then apply css to the loaded elements (works) -->
<link rel="stylesheet" href="css/index.css" />

<!-- Then apply JS to the loaded elements (doesnt work) -->
<script src="js/index.js"></script>

index.js

$(document).ready( function(){
var newHeight = $("nav").position().top;
});

---

始终首先加载所有CSS文件，然后加载JS脚本。总是

所有访问DOM元素的JS都需要在DOM就绪后加载。可以使用其中一个处理程序（比如$（document.ready），也可以简单地将脚本放在HTML正文的末尾。（不确定是否对所有脚本都这样做，可能是这样）

由于您使用AJAX调用加载头，因此需要等待它加载，以便JS可以使用

nav

元素。因此，请使用

load（）

回调函数来执行处理标题标记的所有操作

---

关键内容：由于要分别加载index.js和indexLoad.js，实际上需要它们之间进行某种协调。我建议在index.js文件中设置一个事件侦听器，并在头准备好后（在

load（）

回调中）在indexLoad.js中触发该事件。大概是这样的：

indexLoad.js

$(document).ready( function(){
    $("header").load("http://localhost/js/header.html", function() {
        $('body').trigger('headerReady');
    });
});

index.js

$('body').on('headerReady', function(){
    var newHeight = $("nav").position().top;
    // everything else that requires header elements goes here
    // or under a similar listener
});

---

下面是一个简单的snipper，它使用超时来模拟异步调用延迟：

setTimeout（函数（）{
$（'body'）。追加（'Nav here'）；
$（'body'）.trigger（'headerReady'）；//模拟3s延迟
}, 3000);
$（'body'）。在（'headerReady'，function（）上{
警报（“标题已准备就绪”）；
$（'nav'）.css（'color'，'green'）；
})

---

JS是异步的，因此，即使在页面下方进一步测量

newHeight

值，也不意味着加载完成后将执行/运行该值。相反，请使用回调：

$(document).ready( function(){
    $("header").load("http://localhost/js/header.html", function() {
        var newHeight = $("nav").position().top;
    });
});

---

。。。或延迟对象：

问题是我不能使用这样的函数，它们只能“绑定”到该文件。如果其他功能依赖于“导航”位置，例如，我将无法使用它们。那么您的另一个选择是使用延迟对象。当传递了

.done（）

承诺时，运行依赖于

newHeight

的函数。请看我答案中的链接。很好的解释，谢谢，它现在可以正常工作了：D

$(document).ready( function(){
    $("header").load("http://localhost/js/header.html", function() {
        var newHeight = $("nav").position().top;
    });
});