Question

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

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

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

只需使用.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

如何将html加载到＆＃34;皮肤＆＃34;那个也是从外部html文件加载的？

2 个答案: