Lo que necesitas es delegar eventos. Por ejemplo, supongamos que en mi documento cargaré mediante una petición asíncrona (Ajax), N imágenes que están en otro archivo y que son resultado de una búsqueda en la BD, luego, quiero que al darle clic a cada imagen, se haga más opaca. Entonces, al ser varias imágenes que tendrán el mismo efecto, en lugar de asignarles el evento a cada una mediante sus id, utilizo una clase en común, de tal modo que quedaría así:
Código Javascript
:
Ver original[].forEach.call(document.querySelector(".laClase"), function(img){
img.addEventListener("click", function(){
this.style.opacity = 0.75;
}, false);
});
Pero como originalmente no existen esas imágenes pues cargarán después mediante Ajax, desisto de lo anterior y mejor delego dicho evento ya sea al documento o a la ventana y mediante la propiedad
target del objeto del evento, obtengo al elemento en el cual se ha producido el evento:
Código Javascript
:
Ver originalwindow.addEventListener("click", function(event){
if (event.target.className == "laClase"){
event.target.style.opacity = 0.75;
}
}, false);
De esta manera, cada vez que se de un clic en cualquier parte de la ventana, se verificará si la clase del elemento pulsado corresponde con el de las imágenes y de ser así, lo hacemos opaco, y al ser la ventana la que siempre se verá afectada por el evento, dará igual si las imágenes se añaden después.
También puedes añadir el script al documento, pero eso ya lo decidirás tú.
Saludos