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

Question

我有一个用于创建 div 元素的 for 循环，其 ID 为“category1”、“category2”等。该循环遍历一个键/值数组，如下所示:

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

因此，div 的 ID 是“类别”+ 键。

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

这就是我所说的 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 仅对数组中的最后一个元素起作用。如果我检查 Safari 调试器并输入“category3.onclick”，它显示为 null。如果我键入“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);