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

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 是 破坏性的 属性。它重新创建 设置内容并创建新元素，新生成的元素没有绑定任何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 事件处理程序

Injecting elements and attaching Click event handlers in a loop with Javascript

javascript

loops

event-handling

dom-events