Javascript Girl
  1. Javascript Girl
  3. Accès à l'objet DOM après l'appel AJAX?
Intereting Posts
Ensemble ASP au réseau JavaScript Comment créer une animation circulaire avec différents objets en utilisant jQuery? Trouver si l'élément existe dans la page html complète AngularJS: initialiser ZURB Foundation JS Mettre en surbrillance le mot variable dans une chaîne en utilisant une expression régulière Modification de l'ordre des éléments Erreur de fichier .json de l'extension Chrome lors du téléchargement Est-il nécessaire (…) un modèle de javascript commun ou une fonction de bibliothèque? JQuery JSONP n'appelle pas le rappel Détection de la roue de la souris sur l'axe des x (gauche et droite) avec Javascript D3 format d'heure x axe montrant la même valeur Qu'est-ce que les câbles bouclés de retour signifient en javascript (par exemple, return {init: init}) Uncaught ReferenceError: angulaire n'est pas défini – AngularJS ne fonctionne pas Différence entre l'importation X et l'importation * comme X dans node.js (ES6 / Babel)? Séquence d'événement JavaScript

Accès à l'objet DOM après l'appel AJAX?

J'ai un appel AJAX typique qui ajoute du HTML à la page actuelle. Je veux pouvoir accéder au HTML nouvellement inséré avec les sélecteurs jQuery typiques.

Voici ce que je voudrais pouvoir faire … 

$.ajax({ url: url, success: function(data) { $('body').append(data); } }); $('#new_div').show();

#new_div serait un élément HTML à partir des données que j'ai récupérées. Je ne veux pas forcément attacher des événements aux nouveaux éléments (comme un click ), donc utiliser quelque chose comme .load() ou .on() ne fonctionne pas ici (pour autant que je sache).

J'ai essayé de définir l' $.ajax() à une variable: var new_div = $.ajax(...) mais cela ne m'a pas permis.

Si vous souhaitez manipuler le nouveau contenu immédiatement après (ou même avant) en l'insérant dans le DOM, vous pouvez également le mettre dans le rappel de succès AJAX: 

 $.ajax({ url: url, success: function(data) { $('body').append(data); $('#new_div').show(); } });

D'autre part, si vous souhaitez lier les gestionnaires au contenu qui sera ajouté à la page via ajax, jQuery le fait comme ceci: 

 $(document).on('click', '#new_div', function(){ alert("This function is bound to all #new_div's click events, even if they are added to the DOM via ajax later!") });

Si vous souhaitez découper votre code du rappel: 

 functionWithALotOfStuffToDo = function(data){ // do stuff here } $.ajax({ url: url, success: functionWithALotOfStuffToDo });

que diriez-vous: 

 $.ajax({ url: url, success: function(data) { $('body').append(data).find('#new_div').show(); } });

En supposant que les données renvoyées ressemblent à <div id='new_div' /> essayez quelque chose comme 

 var newDiv = null; $.ajax({ url: url, success: function(data) { newDiv = $(data).appendTo($('body')); } });

Cela ajoutera le <div /> au corps de votre page et attribuera l'élément jQuery à la variable newDiv qui peut être à nouveau accessible à nouveau.

Toutefois, si vous accédez à newDiv avant que le success ne soit retourné, il sera null ou la valeur précédente, si elle a été assignée précédemment.

En fait, ce genre de choses peut être résolu par la manière suivante: (je sais que c'est similaire aux autres, mais un peu plus clair) 

 $.ajax({ url: url, success: function(data) { $('body').append(data); afterHtmlAppendCallback(); } }); function afterHtmlAppendCallback() { $('#new_div').show(); }

Je pense que c'est ajax async cause le problème que vous mentionnez.

Dans jQuery ajax funciton API dit: Exécutez une requête HTTP (Ajax) asynchrone.

Si vous souhaitez accéder aux données de ajax juste après la demande

Vous devriez mettre votre code dans la fonction ajax.success comme: 

 $.ajax({ url: url, success: function(data) { $('body').append(data); $('#new_div').show(); } });

Ou allumez le paramètre async en faux 

 $.ajax({ url: url, async:false, success: function(data) { $('body').append(data); } }); $('#new_div').show();

Cela assurera que le sélecteur $ ('# new_div') obtient l'objet