动态点击事件问题

时间:2016-12-30 16:17:18

标签: javascript for-loop dom button

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

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

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

我的代码可在pastebin

上找到

2 个答案:

答案 0 :(得分: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,显示了这个工作的简单版本。

答案 1 :(得分:0)

在我看来,

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

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

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