Estaba trabajando en un código que escribí y tuve este problema en el que agregué un eventListener a un elemento creado dinámicamente, pero no "dispara", es decir, funciona.
var eleButton = document.createElement("button"); eleButton.innerText="Post"; eleButton.type="submit"; ... eleButtonContainer.appendChild(eleButton);
Y el detector de eventos fue un "clic" básico
eleButton.addEventListener("click", function() { console.log("Hello World"); });
Eso no funcionó, así que busqué y no pude encontrar ninguna respuesta. Finalmente encontré una solución para usar el documento y verificar si ese elemento estaba verificado o no. Así que mi código resultante se convirtió en este:
var eleButton = document.createElement("button"); eleButton.innerText="Post"; eleButton.type="submit"; eleButton.id = "usrResponseSubmit"; console.log(eleButton); document.body.addEventListener('click',function(){ if(event.target.id == "usrResponseSubmit"){ console.log("ok now it works"); } });
Esto funciona bien, pero todavía me hace dudar sobre el código de arriba. Estoy dispuesto a tomar la ruta "si funciona, funciona", pero también me gustaría usar la ruta eleButton.addEventListener porque eso fue lo que siempre usé.
Entonces mis dos preguntas son:
Antes de que digas, pero funciona en mi extremo, mi código es un poco malo y largo. Esencialmente, tengo este eleButton anidado en un contenedor que está anidado en un contenedor... (x~10-20). No creo que este sea necesariamente el problema. Pero también tengo otros eventListeners que "pueden" superponerse con eleButton. No estoy muy seguro de que ese sea el caso, ya que he estado intentando y probando todo lo que puedo.
También saqué eleButton y lo añadí a un objeto existente y el evento se disparó. ¿Puede alguien darme un resumen de cuándo los eventos no se activan?
No hay nada malo con su código, tal vez solo escribió algo mal. aquí hice un ejemplo de codepen que puedes verificar.
html: <div id="btnCon"></div>
...
JS: const eleButtonContainer = document.querySelector('#btnCon') var eleButton = document.createElement("button"); eleButton.innerText="Post"; eleButton.type="submit"; eleButtonContainer.appendChild(eleButton); eleButton.addEventListener("click", function() { console.log("Hello World"); });