Soy nuevo en JavaScript y tengo un problema conceptual. Esencialmente tengo un div. Una vez que se hace clic en el div, se abre otro div, lo llamaré div2 por ahora. Quiero agregar otro div, llamémoslo div3 dentro de div2 y adjuntemos un detector de eventos a los botones en ese div 3. A continuación, escribí rápidamente un código para mostrarle mi situación con comentarios.

 //Create Div1 let div1 = document.createElement("div") div1.className = 'div1' //Attach EventListener on Div1 to create Div2 on click div1.addEventListener("click", function() { //Create Div2 let div2 = document.createElement("div") div2.className = 'div2' //Create Div3 let div3 = document.createElement('div') div3.className = 'div3'; //Create button and attack it to div3 let button1 = document.createElement('div') button1.classList = 'button1' button1.innerHTML = 'click me' div3.appendChild(button1) //Place Div3 in Div2 div2.appendChild(div3) //Attach Event Listener on Div3 so it logs something on click document.querySelector('.div3').addEventListener('click', function() { console.log('test') }); }); //Push Div1 to a container in the DOM document.querySelector('.parentContainer').appendChild(div1) }

He intentado agregar window.load , document.addEventListener('DOMContentLoaded', function(){}); alrededor del detector de eventos div3 y he colocado mi script.js al final del cuerpo que se ha sugerido en línea pero no ha funcionado. Esta publicación es un último recurso.

También pondré un enlace al problema. (Chrome recomendado) En este enlace, presione cualquiera de los rectángulos en el medio y verá que aparece el div 2 a la derecha con 4 botones (div 3) debajo. No puedo hacer que esos botones hagan ninguna función.

https://footballify.net/test/

Además, estos elementos son creados por un bucle, por lo que pueden estar causando el problema. Tampoco recibo mensajes de error. ¿Quizás tengo mi oyente de eventos en el lugar equivocado?