Accéder aux éléments DOM après ajax.load

Question

J'insère la réponse HTML d'un appel AJAX dans ma page, mais lorsque j'essaie d'accéder à ces éléments après leur création, la procédure échoue.

Voici comment je récupère et insère le code HTML:

$.ajax({url: 'output.aspx',
   data: 'id=5', 
   type: 'get', 
   datatype: 'html',
   success: function(outData) {$('#my_container').html(outData);} 
})

Le code HTML de résultat inséré dans le <div> (id = my_container) se présente comme suit:

<div id="my_container">
   <ul>
      <li id="578" class="notselected">milk</li>
      <li id="579" class="notselected">ice cream</li>
      <li id="580" class="selected">chewing gum</li>
   </ul>
</div>

... et ensuite, lorsque j'essaie d'accéder à l'un des <li> éléments à l'aide de requêtes telles que: $('#my_container li:first') ou $('#my_container ul:first-child') ou similaire, rien n'est sélectionné.

J'utilise le plug-in Listen pour détecter tout événement de clic sur les $(document).ready éléments. et cela fonctionne ... Mais je ne pouvais pas savoir comment détecter si la div est renseignée avec le code HTML en sortie et modifier en conséquence l’une des <=> classes de la classe, par exemple ...

<=> ne fonctionne pas non plus ...

Imaginez que je doive changer le style CSS de la seconde <=> .. quelle est la solution à ce problème?

Answer 1

Comment vérifiez-vous si votre appel AJAX est terminé? Comme il est asynchrone, les éléments ne seront bien entendu pas disponibles pour le code qui s’exécute immédiatement après votre $.ajax(…) appel.

Essayez de manipuler ces éléments depuis la success fonction ou dans un autre code appelé à partir de là & # 8212; à ce stade, vous saurez que le contenu est disponible.

Answer 2

Êtes-vous sûr que votre demande est acceptée? Si rien n'est sélectionné, la raison la plus probable est que rien n'a été réellement inséré dans #my_container.

Answer 3

Commencez par essayer le code suivant (à la place de l'appel AJAX d'origine que vous avez présenté):

var html = $.ajax({url: 'output.aspx',
   data: 'id=5', 
   type: 'get', 
   datatype: 'html',
   async: false
}).responseText;
$('#my_container').html(html);

Si cela fonctionne, votre sélecteur li:first est juste appelé avant la fin de la demande AJAX. Si cela ne fonctionne pas, essayez le code suivant:

$.ajax({url: 'output.aspx',
   data: 'id=5', 
   type: 'get', 
   datatype: 'html',
   success: function(outData) { $('#my_container').html(outData); }, 
   error: function(errorMsg) { alert('Error occured: ' + errorMsg); }
});

Cela fera apparaître un message d'erreur si la demande échoue. Si un message d'erreur s'affiche avec un message d'erreur, la demande ne retourne pas.

Answer 4

on dirait que vous essayez d'accéder à ces éléments avant leur création, car votre appel ajax actuel est asynchrone, essayez de mettre l'option: " async = false " à votre ajax et il devrait être travail.