JavaScript 未检测到对 td 的点击

Question

JavaScript 未检测到对 table 单元格的点击，代码不起作用。代码：

document.querySelectorAll("td").forEach(e => e.addEventListener("click", function(){
    console.log(this.cellIndex);
    console.log(this.innerText);
    console.log(document.querySelectorAll("th")[this.cellIndex].innerText);
}));

如果我将此代码粘贴到控制台中它可以工作，但作为单独的 .js 文件或在 html 代码中它不起作用。有什么问题吗？

Answer 1

如果您将上述代码链接为单独的 JS 文件，并且您的导入脚本标签位于中，请确保所有 DOM 相关函数必须位于 DOMContentLoaded 或加载事件回调。

对于这种情况，将外部 js 文件中的脚本更改为：

onload = () => {

    document.querySelectorAll("td").forEach(e => e.addEventListener("click", function(){
        console.log(this.cellIndex);
        console.log(this.innerText);
        console.log(document.querySelectorAll("th")[this.cellIndex].innerText);
    }));

}

编辑 1：

知道是在Ajax之后，

首先，querySelectorAllreturns一个NodeList，它没有forEach方法。

改用 Array.from(document.querySelectorAll()).forEach。

其次，将代码放在AJAX创建td回调的回调中。

JavaScript 未检测到对 td 的点击

JavaScript does not detect clicks on td

javascript

click

addeventlistener