先前的子节点事件处理程序未触发

如何解决先前的子节点事件处理程序未触发

我正在构建一个元素周期表并为每个元素添加了一个事件处理程序。触发时，弹出窗口会显示有关该元素的一些信息。例如，当我单击第 10 个元素，然后单击之后的任何元素时，将显示该元素的弹出窗口。如果我单击第 10 个元素之前的任何元素，则什么也不会发生。我该如何解决这个问题？

const infoCard = document.getElementById('infoCard');

async function getElements(){
    const response = await fetch('https://neelpatel05.pythonanywhere.com');
    const data = await response.json()

    data.forEach(item =>{
        let name = item.name;
        let symbol = item.symbol;
        let atomicNumber = item.atomicNumber;

        let el = document.createElement('div');
        el.className = "element";
        el.innerHTML =
        `
            <h6 class ="elName">${name}</h6>
            <h2>${symbol}</h2>
            <p class="atomicNumber">${atomicNumber}</p>
        `
        
        tableContent.append(el);

        el.addEventListener('click',() =>{          // EVENT LISTENER!
            let infoFolder = el.lastElementChild;
            infoFolder.classList.remove('hide');
        })

        make(item)
    })

    /*console.log(tableContent);*/
    
}

function make(item){
        let name = item.name;
        let symbol = item.symbol;
        let atomicMass = item.atomicMass;
        let atomicNumber = item.atomicNumber;
        let atomicRadius = item.atomicRadius;
        let meltingPoint = item.meltingPoint;
        let boilingPoint = item.boilingPoint;
        let bondingType = item.bondingType;
        let standardState = item.standardState;
        let groupBlock = item.groupBlock;

        let info = document.createElement('div');
        info.className = "info hide";
        info.style.background ='#f0ecf3';
        info.innerHTML =
        `
        <button><i class="fas fa-times"></i></button>
        <p class="name"><span>Element:</span> ${name}</p>
        <p class="symbol"><span>Symbol:</span> ${symbol}</p>
        <p class="atomicNumber"><span>Atomic Number:</span> ${atomicNumber}
        <p class="atomicMass"><span>Atomic Mass:</span> ${atomicMass}</p>
        <p class="atomicRadius"><span>Atomic Radius:</span> ${atomicRadius}</p>
        <p class="bondingType"><span>Bonding Type:</span> ${bondingType}</p>
        <p class="standardState"><span>Standard State:</span> ${standardState}</p>
        <p class="groupBlock"><span>Group Block:</span> ${groupBlock}</p>
        <p class="boilingPoint"><span>Boiling Point:</span> ${boilingPoint}</p>
        <p class="meltingPoint"><span>Melting Point:</span> ${meltingPoint}</p>
       
        `
        const el = document.querySelectorAll('.element');

       el.forEach( e => {
           e.append(info)
       })

       let button = document.querySelectorAll('button');
       
        for(i = 1; i < button.length; i++){
            button[i].addEventListener('click',() =>{
                info.classList.add('hidebox')
                location.reload()
            })
        }
}

getElements()