Question

我的html内容为

<div id="externalContent"></div>
<script src="jquery.js"></script>
<script>
    console.log("the number of div elements before loading tempfile are " +$("div").length)
    $('#externalContent').load('tempfile.html')
    console.log("the number of div elements after loading tempfile are " + $("div").length)
    $('#externalContent').append('temp.html contents loaded above...')
    setTimeout(function(){
        console.log("the number of div elements in page after timeout are " + $("div").length)
    }, 5000)
</script>

它做的很简单。它使用$ .load加载一个包含1000个div元素的外部文件tempfile.html，并立即在控制台中打印div元素的数量。

输出是，

the number of div elements before loading tempfile are 1
the number of div elements in page after loading tempfile are 1
the number of div elements in page after timeout are 1001

那么，为什么在$ .load之后打印的第二个日志语句会将元素数量显示为一个？如果dom加载（通过$.load，$("...").html("blah..blah..")等...）是一个异步任务，我怎样才能确保dom完全加载？

注意：tempfile.html是一个包含1000个div元素的批量文件，

<div id="1">1</div><div id="2">2</div><div id="3">3</div>..... <div id="1000">1000</div>

Answer 1

您应该使用回调函数，因为请求是异步的。

$('#externalContent').load('tempfile.html', null, function() {
    console.log("the number of div elements after loading tempfile are " + $("div").length);
});

请参阅jQuery API Documentation。

Answer 2

正如Pointy评论的那样，你需要使用一个你传入.load（）的回调，因为jQuery只有在完成异步调用后才会调用它。这是你会遇到的很多东西。见 - http://api.jquery.com/load/

这里的例子就是你想要的那个 -

$( "#result" ).load( "ajax/test.html", function() {
  alert( "Load was performed." );
});

Jquery加载不会立即加载DOM元素

2 个答案: