Question

我有一个从JSON数组加载的表，但我的点击事件解决方案似乎不起作用。循环循环时，我向每个新添加的div添加一个click事件给每个侦听器。

document.getElementById(i.toString()).addEventListener("click", function(event)
{
    console.log(event);
});

问题只是响应点击的最后一个元素。

我的代码可在pastebin

上找到

Answer 1

这种情况正在发生，因为您当前正在尝试向html添加新元素。

替换它（你目前在做什么）：

var div = document.createElement("div");
div.setAttribute("class", nodeType);
div.setAttribute("id", i.toString());
div.innerHTML = '<div class="nodeName">' + json[i][0] + '</div>';
nw.appendChild(div);

有了这个：

#firstdiv { width:100%; height:200px; }
#seconddiv { width:80%; height:70px; }
#thirddiv { width:80%; height:70px; }
#firstdiv { color:red; background:yellow; }
#seconddiv {  color:red; background:green; }
#firstdiv { border:3px solid black; border-rdius:5px; }

这是一个fiddle，显示了这个工作的简单版本。

Answer 2

在我看来，

nw.innerHTML = nw.innerHTML + "<div class='" + nodeType + "' id='" + i + "'><div class='nodeName'>" + json[i][0] + "</div></div>";

此代码也会覆盖以前的nw元素及其事件侦听器。

因此，请尝试使用document.createElement("div")而不是使用innerHTML，并使用nw将其附加到appendChild()。它适用于我的测试。

动态点击事件问题

2 个答案: