如何將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請求，這是異步的，不在它之後阻止代碼的執行。