[SOLUCIONADO] Elementos dinámicos y eventos

[opzina]

Como gestionar eventos en elementos creados dinamicamente.

Ejemplo:

Al hacer click en un boton, se crea una caja, que no estaba en el DOM, con id caja.


Una vez creado el elemento con id "Caja", necesito que esté disponible en el dom para poder asociarle eventos a este elemento creado. ¿Cómo se haría esto?

Hasta el día de hoy hago lo siguiente: creo el elemento e inmediatamente le asocio el evento...pero no me resulta nada práctico...

[chwc]

mira, para crar un objeto del DOM, podes utilizar el siguiente codigo

Código Javascript:

elemento = document.createElement('div'); // crear el elemento
elemento.id='Caja'; // le asignamos el ID
document.body.appendChild(elemento); // posisiciona el elemento como el ultimo hijo de otro (este caso es el document.body, pero puede ser cualquier otro objeto del DOM)
 

es eso

un saludo !

[opzina]

Gracias, aunque no era lo que planteaba.

Mi duda es sobre el manejo de eventos sobre elementos que no estan en el dom apenas se carga el documento y se crea luego mediante la acción de otro evento.

Caraga documento.
Click en boton crear caja
creo caja con id="caja"
Recién ahora puedo adjuntar eventos a id="caja" pq antes no existia??

COmo es el manejo de eventos en estos casos?

[chwc]

no se le puede asignar eventos a elementos que no existan, pero con el simple hecho de hacer lo siguiente

Código Javascript:

elemento = document.createElement('div');
 

ya existen, con eso ya se le puede agregar el id y los eventos.
un elemento puede existir, pero no estar ubicado en ningun lado, y si no esta posicionado, no se puede obtener mediante document.getElementById()

lo que tratas de hacer aqui

creo caja con id="caja"
Recién ahora puedo adjuntar eventos a id="caja" pq antes no existia??

es algo innescesario, digamos por que se resume en el siguiente codigo

Código Javascript:

elemento = document.createElement('div');
elemento.id='Caja';
document.body.appendChild(elemento);
document.getElementById('Caja').addEventListener('click',function(){})
 

se puede hacer asi simplemente

Código Javascript:

elemento = document.createElement('div');
elemento.id='Caja';
document.body.appendChild(elemento);
elemento.addEventListener('click',function(){})
 

y ademas, no nescesita estar obligatoriamente adentro del documento, por lo cual esto también funcionara

Código Javascript:

elemento = document.createElement('div');
elemento.id='Caja';
elemento.addEventListener('click',function(){})
document.body.appendChild(elemento);
 

(reordene las ultimas dos lineas)

pero no funcionara esto

Código Javascript:

elemento = document.createElement('div');
elemento.id='Caja';
document.getElementById('Caja').addEventListener('click',function(){})
document.body.appendChild(elemento);
 

ya que al hacer document.getElementById('Caja') el elemento #Caja no se encuentra en el documento ( recien en la siguiente linea se agrega )

un saludo !

[opzina]

Muchas Gracias!