Wierd動態onclick事件處理程序分配問題

function AddTableHeader(table, cells, newOrderby) { 
    var head = table.createTHead(); 
    var row = head.insertRow(0); 
    row.className = "SupplierDataTableTr"; 
    for (var s in cells) { 
     var cell = null; 
     cell = document.createElement("th"); 
     cell.innerHTML = cells[s]; 
     cell.className = "SupplierDataTableTh"; 
     if (newOrderby != null && newOrderby[s] != null) { 
      var ob = newOrderby[s]; 
      cell.onclick = function() { SetOrderBy(ob); AutoComplete(null, 'txtSearch'); }; 
      cell.style.cursor = "pointer"; 
     } 

     row.appendChild(cell); 
    } 
}

在if語句中，我在數組中設置變量ob = string ..此刻數組包含「SupplierNr」，「Name」，「Email」，「Phone」並且與單元陣列具有相同的順序。Wierd動態onclick事件處理程序分配問題

問題是，最後每個<th>標籤上的事件都有最後一個newOrderby字符串附加到它的「Phone」。我在調試器中遍歷了這個部分，它爲循環中的每個事件設置了不同的orderby字符串，但由於某些原因，所有<th>元素都獲取了最後創建的事件處理程序。爲什麼是這樣？這個單元格是在for循環中創建的，應該是本地的，它們與彼此之間沒有任何關係。

任何人都知道我可能在這裏做錯了嗎？

來源

2011-11-25 Jonas B

是的，我們知道:-)你會得到一堆答案真的很快，我預測。 – Pointy

哦，完全不同的問題：在數組中使用「for ... in」循環（或類似數組的東西，比如「arguments」或NodeList實例）並不是一個好主意。使用數字索引和簡單的「for」循環更好。 – Pointy

[這裏]（http://stackoverflow.com/questions/6163720/javascript-every-event-handler-defined-in-for-loop-is-the-same-uses-last-itera）是一個較舊的Stackoverflow問題這基本上是同樣的問題。 – Pointy

如果您正在循環中分配事件處理函數，那麼您可能需要使用閉包來確保它正常工作。否則，你會遇到你所描述的問題。

類似的問題和解決方案在這裏：Event handlers inside a Javascript loop - need a closure?

來源

2011-11-25 16:52:27

非常感謝，這工作完美。對不起所有重複的問題，我不好尋找合適的關鍵字嘿嘿。 –

Wierd動態onclick事件處理程序分配問題

回答

相關問題