Jquery: добавление данных в div после операции загрузки ajax

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', кажется, запускается до завершения загрузки, так что div closebutton перезаписывается содержимым 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
}