Jquery: Annexer des données à un div après l'opération de charge ajax

Question

J'ai une configuration beaucoup plus comme ceci:

$('.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>"); 
}); 

Cependant, la partie « append » semble fonctionner avant que la charge est terminée, de sorte que la closebutton div est écrasé par le contenu de stuff.html. Comment puis-je attendre que l'opération ajax soit terminée avant d'effectuer l'ajout final?

Merci de
Mala

Answer 1

mettre append en fonction de rappel fonctionne.

$('.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

Utilisez la fonction de rappel [La fonction appelée lorsque la demande ajax est complète (pas nécessairement de succès)] pour la charge, puis tout le contenu.

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

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