要素を注入し、JavaScriptでループ内のClickイベントハンドラをアタッチする

Question

javascriptを使用して配列から値を取り込むドロップダウンをしようとしています。各アイテムにはイベントトリガーが接続されている必要がありますが、現在は最後のエレメントにのみイベントが接続されています。私はクロージャを固定することに基づいて例を試しましたが、まだ最後の要素にしか付着していません。 innerHTMLが破壊財産であるためだ

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

。 は、の設定内容を再作成し、新しい要素を作成します。新しく生成された要素には、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を使用して要素を作成できます。