En mi aplicación de dibujo tengo una función llamada addMouseOver. Agrega un detector de eventos a todos los cuadrados para que cuando pases el mouse sobre ellos se vuelvan negros. El problema es que funciona en la cuadrícula inicial, pero también tengo un botón de cambio de tamaño con detectores de eventos de múltiples clics que eliminarán los elementos de la cuadrícula actual, agregarán otros nuevos y luego también agregarán la función de mouseover. No estoy seguro de por qué la función no funciona en el detector de eventos.

 // Get grid container as variable, create grid item so we can add using for loop let gridContainer = document.querySelector('.grid-container'); let clearButton = document.querySelector('.clear'); let resizeButton = document.querySelector('.resize'); let squaresPerSide = 16; // Grid container is set up to divide whole page 16x16 for loop will add that amount of items function createGrid(container, size) { container.style.gridTemplateColumns = `repeat(${size}, 1fr)`; container.style.gridTemplateRows = `repeat(${size}, 1fr)`; for (let i = 0; i < size * size; i++) { let gridItem = document.createElement('div'); gridItem.classList.add('grid-item'); container.appendChild(gridItem); }}; // Get grid item to change color when hovered over // and change back when mouse isn't over function addMouseOver(gridItems) { gridItems.forEach(item => item.addEventListener('mouseover', () => item.style.backgroundColor = 'black' )) }; // function to reset color of blocks when clear button clicked // has to work for all grid sizes createGrid(gridContainer, squaresPerSide); let allGridItems = document.querySelectorAll('.grid-item'); addMouseOver(allGridItems); clearButton.addEventListener('click', () => allGridItems.forEach(item => item.style.backgroundColor = 'rgb(177, 229, 231)')); // Function to prompt user to select amount of squares per side // when resize button is clicked, and change grid accordingly. resizeButton.addEventListener('click', () => allGridItems.forEach(item => item.remove())); resizeButton.addEventListener('click', () => squaresPerSide = parseInt(prompt('How many squares would you like per side?'))) resizeButton.addEventListener('click', () => createGrid(gridContainer, squaresPerSide)); resizeButton.addEventListener('click', () => addMouseOver(allGridItems));