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

Question

我有一个for循环创建div -elements，ID为'category1'，'category2'等。循环遍历一个键/值数组，看起来像这样：

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

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

在for循环中，元素被添加到container-div的innerHTML中，我添加了一个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”，则表示null。 如果我输入“category4.onclick”（这是最后一个），它将返回正确的函数。

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

Answer 1

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

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);