Question

为什么听众只能在一个td上工作？

这是fiddle。

document.getElementById(x).addEventListener("click",showStatusDialog);

此行仅适用于一个项目，而评论中的提醒适用于所有td项目。

Answer 1

我理解你的代码即使它有点乱，但我不确定我是否应该给你一个答案因为我会教你不好的做法你的代码是。但是你想要学习的是关于事件代表团这里有一些非常好的资料来源：

Source 1

First link is by codepen and it says I needed some code so I'm pretending this is code.

Source 2

Source 3

Source 4

<强>注意：

请不要投票。我不想对此发表评论，因为它看起来不太好看。因此，如果有人要提供直接问题的答案，请随意。我只相信@BipBip想要了解事件委派。

谢谢。

Answer 2

因为当您使用innerHTML添加行时，会销毁附加到其兄弟节点的所有事件。因此，您添加的每一行都会破坏之前添加的事件。这就是为什么只有最后一个元素才有click事件。

您应该使用事件委派或使用document.createElement()和appendChild()

构建行

//outside the loop
var tbody = document.querySelector("#tfhover tbody");


var tr = document.createElement("tr");
var td1 = document.createElement("td");
td1.innerHTML = json2[i].rank;
var td2 = document.createElement("td");
td2.innerHTML = json2[i].content;
var td3 = document.createElement("td");
td3.innerHTML = json2[i].UID;
td3.id = "uid"+i;
td3.addEventListener("click",showStatusDialog);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tbody.appendChild(tr);

如何在td元素中添加监听器？

2 个答案: