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

Question

I'm trying to make a dropdown which is populated from an array with javascript. Each Item needs to have an event trigger attached, but it currently only attaches the event to the last element. I have tried the examples based on fixing closures but is still only attaches to the last element.

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

That's because innerHTML is a destructive property. It recreates the set content and creates new elements, the newly generated elements do no have any click handlers bound to them. You should create a node (element) instead of using innerHTML .

You can use the document.createElement and HTMLElement.appendChild methods instead:

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 . Note that it doesn't add the br elements and you can use the similar DOM APIs for creating them.