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

Question

我试图加载HTML到皮肤（页眉/页脚与导航按钮），也已从外部HTML文件加载。下面是的jsfiddle的代码，虽然它不会工作，因为我不能把两个外部文件导入的jsfiddle：

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

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

medbox.html ：

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

smallBox.html：

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

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

这就是我想要的结果是这样的：

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

Answer 1

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

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

了解更多：http://api.jquery.com/load

Answer 2

只要使用​​的回调：

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

​​发送一个AJAX请求，这是异步的，不在它之后阻止代码的执行。