How to load html into a “skin” that has also been loaded from an external html file?

问题

I'm trying to load html into a skin (header/footer with nav buttons) that has also been loaded from an external html file. Here's the code in jsfiddle although it won't work because I can't put the two external files into jsfiddle:

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

This is the content in the two external files:

medbox.html:

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

smallBox.html:

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

When I click the button, the medium box appears in the big box, but the small box doesn't appear in the medium box. I think the code to load the smallbox.html executes before the medBox.html has fully loaded, so how do I get it to wait for the medBox.html to fully load?

This is what I want the result look like:

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

回答1:

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

Use a callback function in your first load handler.

Read more: http://api.jquery.com/load

回答2:

Just use .load()'s callback:

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

.load() sends an AJAX request, which is asynchronous and doesn't block the execution of code after it.

来源：https://stackoverflow.com/questions/12592203/how-to-load-html-into-a-skin-that-has-also-been-loaded-from-an-external-html-f