Puis-je faire une requête Ajax dans une requête Ajax en cours (par exemple sur la fonction de rappel de succès)?

Question

J'ai une application jQuery, un panier, qui affiche des informations sur le serveur, si le champ de saisie de texte est modifié. Ceci est fait dans une requête Ajax. Maintenant, si la requête Ajax est un succès, je veux recharger le panier de manière asynchrone. Le code est le suivant:

$(document).ready(function() { 

    var jInput = $(":input"); 
    jInput.change(function() { 
     var vareAntal = $(this).val(); 
     var vareID = $(this).siblings("input#vareID").val(); 
     $.ajax({ 
      type: 'POST', 
      url: 'checkout.aspx', 
      data: { 'ID': vareID, 'Antal': vareAntal }, 
      success: function() { 
       $("#newbasket").load(location.href + " #newbasket>*", ""); 
      } 
     }); 
    }); 
}); 

Cela fonctionne, mais une seule fois! Si je change le champ d'entrée de texte, après que la page est chargée pour la première fois, la div avec l'ID de newbasket se recharge de manière asynchrone. Mais si j'essaie de le changer à nouveau, rien ne se passe.

J'ai essayé de faire du débogage avec Firebug, et la première fois que je change le champ d'entrée de texte, il déclenche un événement POST, puis un événement GET, lorsque l'événement POST est réussi. Mais après cela, rien ne se passe quand je change de nouveau le champ de saisie de texte. Alors, comment puis-je réussir à déclencher la méthode .load() après chaque changement d'entrée de texte?

J'ai également essayé d'expérimenter avec la fonction .ajaxComplete(), mais cela, bien sûr, a abouti à une boucle infinie, puisque le .load() est un objet ajax.

Answer 1

Au lieu de .change(func), utilisez .live('change', func) ici, comme ceci:

jInput.live('change', function() { 

Cela rendra le travail de sélection sur les nouvelles entrées ajoutées. Lorsque vous remplacez les éléments comme vous le faites actuellement, leurs gestionnaires d'événements sont perdus (ou plutôt, ne sont pas recréés, car vous avez de nouveaux éléments). .live() est juste à cet effet, il écoute les événements de vieux et nouveaux éléments, indépendamment du moment où ils ont été ajoutés.