Jquery：在ajax加载操作后将数据附加到div

Question

我的设置很像这样：

$('.container a').click(function(event) {
    event.preventDefault();
    $('#contents').remove();
    $(this).parent().append("<div id=\"contents\"></div>");
    $('#contents').html('<img src="/images/loading.gif" />')
                  .load("stuff.html")
                  .append("<div id=\"closebutton\"></div>");
});

但是，'append'部分似乎在加载完成之前运行，因此closebutton div被stuff.html的内容覆盖。 在执行最终追加之前，如何让它等到ajax操作完成？

谢谢 ：）
马拉

Answer 1

将append置于回调函数中将起作用。

$('.container a').click(function(event) {
    event.preventDefault();
    $('#contents').remove();
    $(this).parent().append("<div id=\"contents\"></div>");
    $('#contents').html('<img src="/images/loading.gif" />')
               .load('stuff.html',{},function(){
                  $(this).append('<div id=\"closebutton\"></div>");
               });
});

Answer 2

使用回调函数 [当ajax请求完成时调用的函数 （不一定成功）]进行加载，然后附加内容。

$('#contents').html('<img src="/images/loading.gif" />')
                  .load("stuff.html",function() { AppendContent(); } )

function AppendContent()
{
    // do your append function here
}