动态创建元素并添加onclick事件不起作用

Question

我有一个for循环，创建div-id元素，如'category1'，'category2'等。循环遍历一个键/值数组，如下所示：

"0" : "Java", 
"1" : "JavaScript", 
"2" : "HTML" 

所以，div的ID是'category'+键。

在将元素添加到容器div的innerHTML的for循环中，我添加了一个onclick -event。

这是for循环，我说的是：

for (var key in categories) { 
    categoriesBlock.innerHTML += '<div class="category" id="category' + key + '">' + categories[key] + '</div>'; 

    document.getElementById('category' + key).onclick = function() { showPostsForCategory(key, categories[key]); } 
} 

其中categories是上述阵列。

问题是，onclick只适用于数组中的LAST元素。如果我使用Safari调试器进行检查并键入“category3.onclick”，它将显示为空。如果我输入“category4.onclick”（这是最后一个），它将返回正确的功能。

这怎么可能？以及如何解决它？

Answer 1

这是一个范围界定问题。点击处理程序指向最后一个值，因为这就是循环结束时的结果。这是一种捕捉价值的方法。

for (var key in categories) {   
    (function(){ 
     var _key = key; 
     document.getElementById('category' + _key).onclick = function() { showPostsForCategory(_key, categories[_key]); } 
    })(); 
} 

编辑...

此外，字符串连接不是创建HTML元素的理想方法。在某些浏览器中，插入文本时以及它变成实际的html元素之间可能存在延迟。

var div = document.createElement('div'); 
div.onclick = function(){...}; 
categoriesBlock.appendChild(div);