为容器内多个同class的div绑定点击事件监听器不生效如何解决

问题根因 #

你的事件绑定代码执行时机早于网格DOM元素的生成时机。代码运行时会优先执行最外层的document.querySelectorAll(".grid-item")语句，此时makeGrid(16,16)还未执行，页面中不存在任何带grid-item类的元素，查询返回的是空节点列表，事件绑定自然不会生效。你尝试的container.childNodes遍历逻辑也存在同样的执行时机问题，子元素创建前遍历父节点的子元素列表，拿到的也是空列表。

解决方案 #

方案1：调整绑定代码执行顺序 #

将事件绑定逻辑移动到网格生成完成之后，保证查询元素时DOM已经存在：

const container = document.querySelector(".container");

function makeGrid(rows,cols) {
    container.style.setProperty("--grid-rows",rows);
    container.style.setProperty("--grid-cols",cols);
    for (let i = 0; i < (rows*cols); i++) {
        let gridItem = document.createElement("div");
        container.appendChild(gridItem).classList.add("grid-item");
    }
}
// 先生成网格
makeGrid(16,16);
// 再查询所有网格项绑定事件
document.querySelectorAll(".grid-item").forEach(gridItem => gridItem.addEventListener("click", myFunc));

function myFunc() {
    console.log("hello");
}

方案2：创建元素时直接绑定事件 #

在生成网格项的循环中直接给新创建的DOM绑定事件，不需要额外二次遍历：

const container = document.querySelector(".container");

function makeGrid(rows,cols) {
    container.style.setProperty("--grid-rows",rows);
    container.style.setProperty("--grid-cols",cols);
    for (let i = 0; i < (rows*cols); i++) {
        let gridItem = document.createElement("div");
        gridItem.classList.add("grid-item");
        // 创建元素时直接绑定点击事件
        gridItem.addEventListener("click", myFunc);
        container.appendChild(gridItem);
    }
}
makeGrid(16,16);

function myFunc() {
    console.log("hello");
}

方案3：使用事件委托（更推荐） #

直接给父容器绑定事件，通过事件冒泡机制判断点击目标是否为网格项，不需要给每个子元素单独绑定，后续新增网格项也不需要重新绑定，性能更高：

const container = document.querySelector(".container");
// 父容器绑定事件，委托处理所有子元素的点击
container.addEventListener("click", function(e) {
    if (e.target.classList.contains("grid-item")) {
        myFunc();
        // 如需获取当前点击的网格项，直接使用e.target即可
    }
});

function makeGrid(rows,cols) {
    container.style.setProperty("--grid-rows",rows);
    container.style.setProperty("--grid-cols",cols);
    for (let i = 0; i < (rows*cols); i++) {
        let gridItem = document.createElement("div");
        container.appendChild(gridItem).classList.add("grid-item");
    }
}
makeGrid(16,16);

function myFunc() {
    console.log("hello");
}

内容的提问来源于stack exchange，提问作者youmac