Question

我正在尝试使用javascript从数组填充下拉列表。每个Item都需要附加一个事件触发器，但它目前只将事件附加到最后一个元素。我已经尝试了基于修复闭包的示例，但仍然只附加到最后一个元素。

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是破坏性属性。它重新创建设置内容并创建 new 元素，新生成的元素没有绑定到它们的任何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);

Here is a demo on jsfiddle。请注意，它不会添加br元素，您可以使用类似的DOM API来创建它们。

使用javascript注入元素并在循环中附加Click事件处理程序

1 个答案: