dynamic addeventlistener onclick只返回數組中的最後一個結果

Question

我的代碼中有一個動態的document.createElement。我想添加addEventListener - onclick創建的所有<div>。我遇到的問題是從我的數組返回的所有onclick事件。

var table = [ 
       [ "H", "Hydrogen", "1.00794", 1, 1 ], 
       [ "He", "Helium", "4.002602", 18, 1 ], 
       [ "Li", "Lithium", "6.941", 1, 2 ], 
       [ "Be", "Beryllium", "9.012182", 2, 2 ], 
      ]; 

for (var i = 0; i < table.length; i ++) { 

     var item = table[ i ]; 


     var element = document.createElement('div'); 
     element.setAttribute("id", "element_"+i); 
     element.className = 'element'; 
     element.style.backgroundColor = 'rgba(0,127,127,' + (Math.random() * 0.5 + 0.25) + ')'; 
     element.style.cursor = 'pointer'; 
     element.addEventListener("click", function(e){ alert(item[0]); }); 
} 

當我點擊任何div它只警告我「是」，這是我的數組中的最後一個結果。我應該如何將事件處理程序添加到每個特定的<div>。我曾嘗試使用bind，但當點擊時不會顯示警告框，並且不顯示任何錯誤消息。

Answer 1

，直到執行點擊事件，是因爲封閉的可變item

var table = [ 
    [ "H", "Hydrogen", "1.00794", 1, 1 ], 
    [ "He", "Helium", "4.002602", 18, 1 ], 
    [ "Li", "Lithium", "6.941", 1, 2 ], 
    [ "Be", "Beryllium", "9.012182", 2, 2 ] 
]; 

for (var i = 0; i < table.length; i ++) { 
    (function(idx){ 
     var item = table[ idx ]; 
     var element = document.createElement('div'); 
     element.setAttribute("id", "element_"+idx); 
     element.className = 'element'; 
     element.style.backgroundColor = 'rgba(0,127,127,' + (Math.random() * 0.5 + 0.25) + ')'; 
     element.style.cursor = 'pointer'; 
     element.addEventListener("click", function(e){ 
      alert(item); 
     }); 
    })(i) 

} 

在這種情況下，事件回調試圖訪問閉包變量item，但item值未評估的錯誤用法，那時項目的價值就會改變。