Tengo tabla en HTML:

Al hacer clic en el botón, aparece una nueva celda cada vez. Cada nueva celda tiene clase, por supuesto. Luego quiero hacer clic en la celda para que aparezca un nuevo div.

Debería funcionar así:

 cell_1 (class xxx) can create div1 cell_2 (class xxx) can create div2 etc.

El problema es: no puedo dirigirme a la clase xxx de estas celdas correctamente. He intentado resolverlo agregando un nuevo script al final del código addEventListener de esta manera:

 let popupScript = document.createElement ("script"); popupScript.src = "newscript.js"; document.body.appendChild(popupScript);

Y en este nuevo script puedo dirigirme a la clase xxx creada dinámicamente. Pero el problema persiste: si creo 5 celdas y luego hago clic en la celda №1, funciona como si hiciera clic 5 veces en la celda №1.

También he intentado usar MutationObserver. Pero el problema permanece.

Entonces decidí comprobarlo de otra forma: En HTML:

 <table> <tr> <td class="textClass">1</td> <td class="textClass">2</td> <td class="textClass">3</td> <td class="textClass">4</td> </tr> <tr> <td id="click_button">GO CLICK</td> </tr> </table>

En JavaScript:

 for (let g=0; g<4; ++g) { document.querySelectorAll(".textClass")[g].addEventListener ("click", function() {console.log (g)}); }

Ahora g en la consola muestra el número correcto de clics. Un clic - un número.

Pero si pongo este código en JavaScript:

 let x = 0; document.getElementById ("click_button").addEventListener ("click", function() { let y = document.createElement ("div"); document.body.appendChild (y); x++; }); let observer = new MutationObserver (function () { for (let g=0; g<x; ++g) { document.querySelectorAll(".textClass")[g].addEventListener ("click", function() {console.log (g)}); } }); observer.observe (document.body, {childList: true});

el problema permanece. Y si hace clic 4 veces en "GO CLICK" y luego hace clic en la primera celda, en la consola verá (4)0.

Entonces, ¿qué está mal?