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

时间:2009-12-19 07:36:23

标签: javascript jquery ajax 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")
                  .append("<div id=\"closebutton\"></div>");
});

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

谢谢:)
马拉

2 个答案:

答案 0 :(得分:8)

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>");
               });
});

答案 1 :(得分:4)

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

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

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