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事件处理程序分配问题

回答

相关问题