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:

1. ¿Está usando document.addEventListener mal?
2. ¿Por qué no funciona eleButton.addEventListner?

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?