使用 onclick 动态创建元素只会执行最后一个元素

Question

我正在为同样动态创建的 html 元素动态创建一个 onclick 事件。我可以很好地制作元素，但是当我单击特定的元素时，它总是对最后一个创建的元素运行onclick。

var parentNode = document.getElementById('mpacks');
parentNode.innerHTML = '';
for (var i = 0, size = listOfItems.length; i < size; i++){
        var listNode = document.createElement('LI');
        var tmp = document.createElement('a');
        tmp.id = listOfItems[i];
        tmp.innerText = listOfItems[i];
        listNode.appendChild(tmp);
        parentNode.appendChild(listNode);
        tmp.onclick = function() {insertParam(listOfItems[i])};
}

例如：如果我有列表[link1, link2, link3]，我会将它们呈现得很好，它们都显示在我的页面上。当我单击链接 1 时，我希望将其传递到 onclick 函数中，如图所示...... insertParam("link1") .相反，当我单击 link1 时，由于某种原因，它会insertParam("link3")传递。

Answer 1

这是因为关闭而发生的。使用 let 而不是 for 循环中的var

for (let i = 0, size = listOfItems.length; i < size; i++)