javascript - Jquery load 不会立即加载 DOM 元素

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 之后打印的第二条日志语句将元素数量显示为 1？如果 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 .