comment jquery et ajax vont-ils ensemble?

Question

Voici ma situation:

J'ai une page en cliquant sur l'un de ses divs une requête ajax récupère plus de contenu à la page.

Le plus de contenu dont je parle est le contenu de la galerie d'images qui utilise jQuery. mon problème est qu'une fois que j'obtiens la réponse de la demande d'ajax, je manipule le DOM. par conséquent la fonction jQuery ready() n'est plus disponible pour moi (ou est-ce?) pour passer le problème j'ai attribué une fonction au $.fn appelé InitGallery.

En utilisant eval je peux l'appeler une fois que ma réponse ajax arrive et tout va bien sauf une petite question-synchronisation!

Une fois que j'ai eval mon code $.fn.InitGallery, le DOM manipulé n'est pas nécessairement complètement chargé, et donc mon InitGallery échoue.

Une fois que j'ajoute une veille ou une alerte à mon code, et que je m'assure que la fonction InitGallery fonctionne après que le DOM soit à nouveau prêt, tout va bien et fonctionne.

Je suppose que ma question est comment est-ce que je peux assigner une fonction prête au DOM? comment puis-je m'assurer que la fonction que j'appelle après que la réponse ajax ne soit appelée qu'après les changements que la réponse ajax a faite sur le DOM est prête? merci

Answer 1

mettre l'appel à votre fonction init dans le gestionnaire de succès de votre requête ajax.

$.ajax({ 
    url: 'ajax/test.html', 
    success: function(data) { 
    makeYourChanges(); 
    callYourInit(); 

    } 
}); 

Answer 2

J'ai besoin plus d'informations, mais ma réponse préliminaire est:

Quelle que soit votre charge contenu ajax doit déclencher un « prêt » événement ou quelque chose de similaire sur le nouveau contenu est fait le chargement. De cette façon, vous pouvez lier votre InitGallery à "prêt" sur cet élément et faire toute votre initialisation après que le dom est prêt.

Qu'est-ce que le chargement de votre contenu via AJAX?

Answer 3

Vous avez quelques options en fonction de ce que vous essayez de faire. Si vous utilisez la fonction live, vous pouvez câbler vos événements une seule fois et ils continueront à fonctionner après avoir modifié le DOM.

Une autre option est de mettre le code d'initialisation en fonction:

$(function() { 
    doCoolStuff(); 
}); 

Accrocher ensuite à l'événement ajaxComplete ou ajaxSuccess:

$.ajaxComplete(function() { 
    doCoolStuff(); 
}); 

Answer 4

Pas besoin d'utiliser l'événement ready() sur le document encore pour cela. l'événement prêt ne se déclenche qu'une seule fois, lorsque le DOM a été chargé initialement.

L'approche pour cela consiste à affecter une fonction à la propriété success de l'objet que vous passez à l'appel ajax; C'est la fonction que vous voulez exécuter une fois la réponse de l'appel terminée.

$.ajax({ 
    url : 'http://some.url', 
    success : function(response) { 
     // do the insert into the DOM. An example 
     // assuming your response is text/html 
     $(document.body).append(response); 

     // now call InitGallery 
     $('#selector').InitGallery(); 
    } 
}); 

Answer 5

je vous conseille d'utiliser des outils pour l'Ajax Debugging comme firebug ou firequery récente.