Mi problema es el siguiente:
Tengo una serie de <div class="box"> que se cargan al inicio y estos div cuando estoy sobre ellos, con jquery los modifico(Le agrego otros div).
Pero si luego agrego mas <div class="box">, y paso sobre ellos no se modifican como los otros div anteriormente cargados.
Cómo puedo actualizar el DOM con jquery? O bien, como puedo hacer para que los nuevos div que agrego con jquery, estén en el DOM?
Os dejo aquí el código:
Código HTML:
<div class="box">
/* Se cargan al inicio*/
<img class="foto" src="img/imagen1.jpg"/>
<img class="foto" src="img/imagen2.jpg"/>
<img class="foto" src="img/imagen3.jpg"/>
/*Se cargan con jquery después*/
<img class="foto" src="img/imagen4.jpg"/>
<img class="foto" src="img/imagen5.jpg"/>
<img class="foto" src="img/imagen6.jpg"/>
</div>
<script type="text/javascript">
$(document).on("ready",function(){
$(".box").on({
click: function(){
alert("Funciona");
}
});
});
</script>
En este caso se me cargan las imagenes imagen1.jpg, imagen2.jpg y imagen3.jpg
Luego con una función se agregan más imágenes : imagen4.jpg imagen5.jpg y imagen6.jpg
Pero cuando realizo click sobre ellas solo me salta el alert en la imagenes 1, 2, 3. Y las demás no.