Jquery: Добавление данных в 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 ДИВ получает перезапись содержимого 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 
}