Correct way to declare events in elements generated by DOM

Question

Correct way to declare events in elements generated by DOM

Navigation

#1 by (1 votes)

2

I'm trying to see what would be the best option when dealing with events created by DOM that are not created when loading the JS.

Let's say that I have an AJAX request in which your return created elements with 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>

How do you assign events to the new created element?

Because in the usual way, obviously it does not work.

    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>

Thank you very much!

javascript dom

asked by Roarca 18.12.2018 в 00:16

source

1 answer

Failed query for the Google spreadsheet Python - ModuleNotFoundError: No module named 'babel.numbers'

score 1 · Accepted Answer

Actually, you can assign the event listeners at the time you create the div element and that will save you a lot of headaches. If you combine it with the use of the event object that comes as a parameter to the function or functions that you listen to, you will save yourself having to use getElementByTagName, or any other of the DOM's scanning functions, and your code will be much more 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';
}

The reason why it does not work "in the usual way" (which is not so usual because of this) is because when you add the listener of the event you have to add it to a specific html element and if the element is still it does not exist it can not work.

Improved solution: Actually, a more efficient way to manage these cases is to give a twist to the solution that I propose above and insert all the elements that you have to insert into a container that will serve as a listener of events. In each element that you insert you can put an identifier (which can be an id or class attribute) so that you can differentiate them in the function that manages the event if you need it.

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

Later in the 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);

In this way we only subscribe one eventlistener, which is more efficient from the point of view of performance and memory, and we do not lose power, because detecting the class or the id in a conditional of the function that is executed in the click we can manage all the cases we need.

Side note: I have changed the% site_co%, because you should not do anything in your document (including adding items) until you have verified that it is ready. Actually the entry point of your program should always be unique, if possible, to avoid trying to access things that may or may not have been created from another entry point. In the case of javascript that entry point should be the function that detects if the document is ready, especially if you are going to interact with the DOM.