用Javascript在循环中注入元素和附加Click事件处理程序

Question

我试图从Javascript数组填充下拉菜单。每个Item都需要附加一个事件触发器，但它目前只将事件附加到最后一个元素。我已经尝试了基于修复闭包的例子，但仍然只附加到最后一个元素。

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);
}

Answer 1

这是因为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来创建它们。