2

Estoy intentando ver cual seria la mejor opcion a la hora de tratar con eventos creados por DOM que no estan creados a la hora de cargar el JS .

Pongamos que tengo una peticion AJAX en la que su regreso creo elementos con DOM.

setTimeout(Crear_div, 500);

function Crear_div(){
  var ele_body = document.getElementsByTagName('body')[0];
  
	var elemento_div   = document.createElement("div");

	var texto_div = document.createTextNode("Nuevo div");
	elemento_div.appendChild(texto_div);

	ele_body.appendChild(elemento_div);

}
<html>
  <body>
   
  </body>
</html>

¿Como le asignos eventos al nuevo elemento creado ?

Porque de la manera habitual , obviamente no funciona.

    setTimeout(Crear_div, 500);

    function Crear_div(){
      var ele_body = document.getElementsByTagName('body')[0];
      
    	var elemento_div   = document.createElement("div");

    	var texto_div = document.createTextNode("Nuevo div");
    	elemento_div.appendChild(texto_div);

    	ele_body.appendChild(elemento_div);

    }
    function ModificarContenido(){
      div_creado.innerHTML = 'Texto modificado';
    }
    
    function asignarEventos()
    {
       if (document['readyState'] == 'complete')
       {
        div_creado = document.getElementsByTagName("div")[0];
        div_creado.addEventListener('click',ModificarContenido);
      }
    }

    document.addEventListener('readystatechange', asignarEventos, false);
<html>
  <body>
  </body>
</html>

¡ Muchas gracias !

1 respuesta 1

1

En realidad, puedes asignar los event listeners en el momento en el que creas el elemento div y eso te ahorrará muchos quebraderos de cabeza. Si lo combinas con el uso del objeto evento que le llega como parámetro a la función o funciones que escuchan, te ahorrarás tener que usar getElementByTagName, o cualquier otra de las funciones de escaneo del DOM y tu código será mucho más flexible:

function Crear_div(){
    var ele_body = document.getElementsByTagName('body')[0];
    var elemento_div = document.createElement("div");
    var texto_div = document.createTextNode("Nuevo div");
    elemento_div.appendChild(texto_div);
    ele_body.appendChild(elemento_div);

    elemento_div.addEventListener('click',ModificarContenido);
}

function ModificarContenido(evento) {
    var ele_clickado = e.target;
    ele_clickado.innerHTML = 'Texto modificado';
}

El motivo por el que no te funciona "de la manera habitual" (que no es tan habitual precisamente por esto) es porque cuando añades el listener del evento se lo tienes que añadir a un elemento html concreto y si el elemento todavía no existe no puede funcionar.

Solución mejorada: En realidad, una forma más eficiente de gestionar estos casos es dar una vuelta de tuerca más a la solución que te propongo más arriba y insertar todos los elementos que tengas que insertar dentro de un contenedor que va a servir como listener de eventos. En cada elemento que insertes puedes poner un identificador (que puede ser un atributo id o class) para que puedas diferenciarlos en la función manejadora del evento si lo necesitas.

<html>
    <body>
        <div class="contenedor"></div>
    </body>
</html>

Después en el js:

var contenedor; 

function Crear_div(){
    var elemento_div   = document.createElement("div");
    elemento_div.classList.add('insertado'); //Esto es para identificarlo después

    var texto_div = document.createTextNode("Nuevo div");
    elemento_div.appendChild(texto_div);

    contenedor.appendChild(elemento_div);
}

function ModificarContenido(evento){
    var ele_clickado = evento.target;
    // El if es opcional (si solo quieres que funcione en el ementos insertados, por ejemplo)
    if (ele_clickado.classList.contains('insertado')) {
        ele_clickado.innerHTML = 'Texto modificado';
    }

}

// He cambiado de nombre tu función asignarEventos. Ver nota al margen
function principal(){
    if (document['readyState'] == 'complete') {
        contenedor = document.querySelector('.contenedor');
        contenedor.addEventListener('click', ModificarContenido);
        setTimeout(Crear_div, 500);
    }

}

document.addEventListener('readystatechange', asignarEventos, false);

De este modo sólo suscribimos un eventlistener, que es más eficiente desde el punto de vista de rendimiento y memoria, y no perdemos poder, porque detectando la clase o el id en un condicional de la función que se ejecuta en el click podemos gestionar todos los casos que necesitemos.

Nota al margen: He cambiado el setTimeout de sitio, porque no deberías hacer nada en tu documento (incluido añadir elementos) hasta que hayas comprobado que está listo. En realidad el punto de entrada de tu programa debería ser siempre único, si es posible, para evitar que intentes acceder a cosas que pueden haberse creado o no desde otro punto de entrada. En el caso de javascript ese punto de entrada debería ser la función que detecta si el documento está listo, especialmente si vas a interactuar con del DOM.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.