JQuery $ (document) .ready ajax load

Question

J'ai regardé un certain nombre de questions connexes et je dois poser cette question complètement différente car j'en ai vu que quelques-unes semblaient se rapporter. Je charge un div middle complet via l'appel JQuery Ajax et je veux simplement pouvoir faire du JQuery automatique sur cette nouvelle zone comme $ (document) .ready permet quand un DOM est chargé. J'ai lu que livequery le ferait, mais je me suis dit qu'il y aurait un moyen de le faire. J'essaie d'ajouter un sélecteur de date à un champ de saisie dès le début.

Ceci est le contenu qui appellera le contenu dans le backend qui tirera alors une section spécifique.

$.post("ReportingWizard",$("#wizard_form").serialize(), function (data) { setData(data); }); 

function setData(data) { 
divElement.innerHTML = data; 
$(activeTab).fadeIn(); //Fade in the active content 
$(".wizardBody").fadeIn(); 
} 

A l'intérieur du fichier qui est mis à l'DivElement aura une méthode JQuery qui doit être exécuté pour modifier le code HTML à l'intérieur.

Answer 1

Enregistrer les événements dans le rappel de la fonction AJAX.

Si vous utilisez .load() pour faire charger le milieu div, placez votre code jQuery directement dans le rappel:

$('#middleDiv').load('/fish.php', function() { 
    $('#someDiv').fadeIn(300); // ? whatever 
}); 

Si vous utilisez certaines des autres fonctions AJAX, placez votre jQuery code après la ligne où vous ajoutez les éléments du DOM dans le rappel:

jQuery.get('/fish.php', function (response) { 
    $('#middleDiv').html(response); 

    $('#someDiv').fadeIn(300); // ? whatever 
}); 

Si ce sont des événements que vous voulez lier, vous pourriez envisager d'utiliser. on() (ou. delegate() ou .live() si vous utilisez les anciennes versions de jQuery, qui étaient autour lorsque cette question a été écrite à l'origine). Vous pouvez voir une comparaison de ces différentes méthodes here.

Ces méthodes permettent la liaison d'événements à des éléments même s'ils ne sont pas encore présents dans le DOM; ce qui signifie que vous pouvez lier les événements dans votre bloc $(document).ready(), même si les éléments ne sont pas encore enregistrés dans le DOM.

Answer 2

Craig,

Je pense que vous essayez d'aller à ce sujet à la dure. Premièrement: Bien que techniquement vous puissiez manipuler la réponse avec javascript/jquery avant de les injecter dans la page, il va être beaucoup plus facile de le faire immédiatement après leur ajout (comme pour un document prêt). Deuxièmement: Je ne suis pas sûr de l'efficacité de cette méthode si vous ajoutiez quelque chose comme un piqueur de date. Je suppose que vous ne pouvez pas ajouter un outil de datation à un élément avant que tout ne se trouve dans la page (juste une supposition). Ces widgets jQuery UI ont beaucoup de choses en arrière-plan.

Je vous suggère de suivre les conseils du Matt.

Si vous appelez .post $, la fonction de rappel est le même que vos $ (document) fonction .ready, elle sera appelée dès que la réponse est disponible pour que vous puissiez faire quelque chose comme ceci:

$.post(url, data, function(response) { 
    $("#some_element").append(response); 
    // Now your element has been injected you can do whatever u like here 
    // call some function etc. 
}); 

C'est la meilleure façon de procéder. La manipulation se fera dès que les données auront été injectées dans votre page de la même manière que $ (document) .ready.

Si vous pensez qu'il y a un décalage avec ce que vous faites et que vous ne voulez pas que vos utilisateurs voient, alors réglez l'affichage pour masquer puis afficher ou afficher une fois que la manipulation a été effectuée.