Detectar clicks en elementos cargados dinámicamente.

[fackius]

Hola gente.

Tengo un problema que no puedo resolver. Ya me ha pasado otras veces.

Mi problema es que cuando cargo elementos dinámicamente al html (divs por ejemplo)
no puedo detectar los eventos del mouse sobre ese objeto.
Por ejemplo,
Si yo hago:

Código Javascript:

<div id="content">
<button id="addButton">Add</button>
<div id="container"></div>
</div>
 
$('#addButton').click(function(){
 $('#container').html('<div id="divClickeable">DivClickeable</div>');
}
//ESTA FUNCION ES LA QUE NO FUNCIONA PARA EL DIVCLICKEABLE
$('#divClickeable').click(function(){
alert('clickeaste el nuevo div');
}
 

Una vez que cargas el nuevo div, e intentas clickear el evento del click no funciona.
Se de la solución de escribir el código javascript cada vez que escribís el html. (por ejemplo cuando cargas desde un callback php).

No quiero que le den bola a la sintaxis, solo quiero saber como hago para que los elementos cargados dinámicamente puedan detectar los eventos del mouse.

Gracias!.

[maycolalvarez]

cuando creas elementos dinámicamente, son elementos independientes, es decir que no heredan ninguna propiedad de los elementos existentes similares, debes de añadir también dinámicamente los listeners (eventos) hacia los mismos al crearlos.

como veo que usas jQuery, puedes usar jQuery Live, aunque éste está enfocado cuando se usa AJAX, no se si contemple cualquier elemento añadido que no provenga de ajax, si no la alternativa más viable es a través de DOM