lunes, 7 de mayo de 2012

Como insertar elementos HTML y heredar los eventos ya cargados

Síntesis: cuando insertas elementos html en el DOM por medio de ajax, jquery por si solo no los hereda, estos elementos no heredan los eventos ya desplegados en el DOM.
Solución: existe un plugin livequery, que incluso después de cargado el javascript y el DOM, es capaz de propagar eventos ya antes cargados a los elementos que sean insertados.
Ejemplo:


Código HTML :

<ul>
   <li>1
   </li>
   <li>2
   </li>
</ul>



Código Javascript (creamos el evento) :


$("#prueba > li").livequery('click',function(){
   alert("hola mundo");
});



Código Javascript (insertamos un elemento):


$("#prueba").prepend("<li>3</li>");


Al dar clic sobre 3 mostrara la alerta hola mundo, cosa que no pasaría si utilizamos click().