Los elementos HTML añadidos dinámicamente no se pueden encontrar usando jQuery

Question

Estoy implementando un navegador de árbol en HTML. Al hacer clic en un nodo, invoco una función que agrega elementos secundarios del nodo. Hasta aquí todo bien. Ahora quiero invocar de inmediato el controlador de clic de uno de los elementos secundarios para expandirlo también. Mi problema es que jQuery no puede encontrar los elementos secundarios que acaban de agregarse. Cuando paso por el depurador, se invoca mi código para encontrar los elementos antes de que el navegador muestre los nuevos elementos, lo cual supongo que es el problema.

¿Hay algún evento que pueda esperar (similar a la carga) que marca cuando el HTML recién agregado está visible? ¿O un método que pueda invocar para forzar el renderizado antes? Cualquier sugerencia será bienvenida.

Nota: Desde entonces, me he dado cuenta de que el problema era completamente mi culpa, no del navegador ni de jQuery. Por favor, mira mi respuesta a continuación.

Answer 1

Al final resolví el problema utilizando setTimeout() para retrasar mi código hasta que se hayan procesado los nuevos elementos. No es una solución ideal, ya que el período de tiempo de espera que he elegido es bastante arbitrario.

He llegado al fondo de la misma. La función a la que llamaba que agregaba el HTML lo estaba haciendo de forma asíncrona a través de una devolución de llamada. Entonces, cuando estaba tratando de encontrar los nuevos elementos HTML, realmente todavía no estaban allí. Ahora modifiqué mi código, por lo que la devolución de llamada también es responsable de procesar los elementos recién agregados, para garantizar que estarán presentes.

Answer 2

Puede utilizar .live() for this, plataforma de su controlador de clic a ella en lugar de sólo .click() así:

$(document).ready(function() { 
    //instead of $(".myTreeNode").click(.... 
    $(".myTreeNode").live('click', function() { 
    //Do stuff 
    }); 
}); 

Un .click() une controladores de eventos a los elementos que encuentra cuando es ejecutado, por lo que nuevos elementos don' t tiene el controlador. .live() en cambio, escucha en el nivel DOM para que los clics se activen, por lo que no importa si se agregan ahora o más adelante. En el caso de muchos elementos, también tiene controlador de eventos en lugar de 1 para cada elemento, después de algunos elementos, esto se vuelve más eficiente también.

Answer 3

"en vivo" está obsoleta desde jQuery 1.7+ a fin de tratar esto,

$(document).on("click","#Cancel" , function(){ 
//do something 
}); 

Visita http://api.jquery.com/on/ para más información