Accedi agli elementi DOM dopo ajax.load

Question

Sto inserendo la risposta HTML da una chiamata AJAX nella mia pagina, ma quando provo ad accedere a quegli elementi dopo che sono stati creati, fallisce ..

Ecco come recuperare e inserire l'HTML:

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

Il risultato HTML, che viene inserito in <div> (id = my_container) è simile a:

<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>

... e successivamente, quando provo ad accedere a uno degli <li> elementi usando query come: $('#my_container li:first') o $('#my_container ul:first-child') o simile, non viene selezionato nulla.

Sto utilizzando il plug-in di ascolto per rilevare eventuali eventi di clic sugli $(document).ready elementi e funziona ... Ma non sono riuscito a capire come rilevare se il div è popolato con l'output HTML e di conseguenza cambiare una delle classi <=> per esempio ...

<=> non funziona neanche ...

Immagina di dover cambiare lo stile CSS del secondo <=> .. qual è la soluzione a questo?

Answer 1

Come stai verificando se la tua chiamata AJAX è stata completata? Poiché è asincrono, gli elementi non saranno, ovviamente, disponibili per il codice che viene eseguito immediatamente dopo la $.ajax(…) chiamata.

Prova a manipolare quegli elementi all'interno della funzione success o in un altro codice che viene chiamato da lì & # 8212; a quel punto, saprai che il contenuto è disponibile.

Answer 2

Sei sicuro che la tua richiesta effettiva abbia avuto successo? Se non viene selezionato nulla, il motivo più probabile è che in realtà non è stato inserito nulla in #my_container.

Answer 3

Per prima cosa, prova il seguente codice (al posto della chiamata AJAX originale che hai mostrato):

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

Se funziona, il tuo selettore li:first viene appena chiamato prima che la richiesta AJAX finisca. Se non funziona, prova il seguente codice:

$.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); }
});

Ciò farà apparire un messaggio di errore se la richiesta fallisce. Se viene visualizzato un messaggio di errore con un messaggio di errore, la richiesta non viene restituita.

Answer 4

sembra che tu stia provando ad accedere a quegli elementi prima che fossero creati perché la tua chiamata ajax corrente è asincrona, prova a mettere l'opzione: quot &; Async = false quot &; al tuo Ajax e dovrebbe funzionare.