html - 如何将 html 加载到也已从外部 html 文件加载的“皮肤”中？

Question

我正在尝试将 html 加载到也已从外部 html 文件加载的皮肤（带有导航按钮的页眉/页脚）中。这是 jsfiddle 中的代码，虽然它不起作用，因为我无法将两个外部文件放入 jsfiddle：

http://jsfiddle.net/J4yUt/1/

这是两个外部文件中的内容：

medbox.html：

<div id="medBox"></div>

小盒子.html：

<div id="smallBox"></div>

当我单击按钮时，中框出现在大框中，但小框没有出现在中框中。我认为加载 smallbox.html 的代码在 medBox.html 完全加载之前执行，那么如何让它等待 medBox.html 完全加载？

这就是我想要的结果：

http://jsfiddle.net/Sv4yf/2/

Answer 1

只需使用.load()' 回调：

$("#bigBox").load("medBox.html", function(response, status, xhr) {
    if (status == 'success') {
        $("#medBox").load("smallBox.html");
    }
});

.load()发送一个 AJAX 请求，该请求是异步的，并且不会阻止其后代码的执行。

Answer 2

$("#bigBox").load("medBox.html", function(){
   $("#medBox").load("smallBox.html");
});

在您的第一个负载处理程序中使用回调函数。

阅读更多：http ://api.jquery.com/load