我正在尝试制作一个下拉列表，该下拉列表是使用javascript从数组填充的。每个项目都需要附加一个事件触发器，但是当前仅将事件附加到最后一个元素。我已经尝试过基于固定闭包的示例，但仍仅附加到最后一个元素。
https://jsfiddle.net/z3h1uux4/
var ArrayUName = ["A","B","C"]
var ArraySlug = ["Q","W","E"]
for (i = 0; i < ArrayUName.length; i++) {
var GoalID = ArrayUName[i] + '-' + ArraySlug[i];
document.getElementById("TheContent").innerHTML +=
'<a class="GoalIDBtn" id="' + GoalID + '">' + ArrayUName[i] + ' / ' + ArraySlug[i] + '</a></br>';
(function(_i, _GoalID)
{document.getElementById(_GoalID).addEventListener(
"click",
function() {alert("Click Made : " + _i)}
);
})(i, GoalID);
console.log("Loop #" + i);
}
那是因为innerHTML是破坏性的财产。它会重新创建设置内容并创建新元素，新生成的元素没有任何click绑定到它们的处理程序。您应该创建一个节点（元素），而不要使用innerHTML。
您可以改用document.createElement和HTMLElement.appendChild方法：
var a = document.createElement('a');
a.className = 'GoalIDBtn';
a.id = GoalID;
a.textContent = ArrayUName[i] + ' / ' + ArraySlug[i];
document.getElementById("TheContent").appendChild(a);
(function(_i /*, _GoalID*/) {
a.addEventListener("click", function() {
alert("Click Made : " + _i);
});
})(i);
这是jsfiddle上的演示。请注意，它不会添加br元素，您可以使用类似的DOM API来创建它们。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句