Acceda a elementos DOM después de ajax.load

Question

Estoy insertando la respuesta HTML de una llamada AJAX en mi página, pero luego cuando intento acceder a esos elementos después de que se han creado, falla ...

Así es como recupero e inserto el HTML:

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

El HTML resultante, que se inserta en <div> (id = my_container) se ve así:

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

... y luego, cuando intento acceder a cualquiera de los elementos <li> usando consultas como: $('#my_container li:first') o $('#my_container ul:first-child') o similar, no se selecciona nada.

Estoy usando el Complemento de escucha para detectar cualquier evento de clic en los elementos $(document).ready y funciona ... Pero no pude descubrir cómo detectar si el div se llena con el HTML de salida y, en consecuencia, cambiar una de las clases de <=> por ejemplo ...

<=> tampoco funciona ...

Imagina que necesito cambiar el estilo CSS del segundo <=> ... ¿cuál es la solución para esto?

Answer 1

¿Cómo verifica si su llamada AJAX se ha completado? Debido a que es asíncrono, los elementos, por supuesto, no estarán disponibles para el código que se ejecuta inmediatamente después de su $.ajax(…) llamada.

Intente manipular esos elementos desde la función success o en otro código que se llame desde allí & # 8212; en ese momento, sabrá que el contenido está disponible.

Answer 2

¿Está seguro de que su solicitud real fue exitosa? Si no se selecciona nada, la razón más probable es que en realidad no se insertó nada en #my_container.

Answer 3

Primero, intente el siguiente código (en lugar de la llamada AJAX original que mostró):

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

Si eso funciona, su selector li:first está siendo llamado antes de que finalice la solicitud AJAX. Si eso no funciona, intente el siguiente código:

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

Eso hará que aparezca un mensaje de error si la solicitud falla. Si aparece un mensaje de error con un mensaje de error, la solicitud no se devuelve.

Answer 4

parece que está intentando acceder a esos elementos antes de que se hayan creado porque su llamada ajax actual es asíncrona, intente poner la opción: " async = false " a su ajax y debería funcionar.