javascript - 用onclick动态创建元素只执行最后一个元素

标签 javascript html dynamic

<分区>

我正在为同样动态创建的 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")

最佳答案

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

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

关于javascript - 用onclick动态创建元素只执行最后一个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55363039/

相关文章:

javascript - JQuery DatePicker 忽略 DateFormat

javascript - 是否可以一次在一个对象中传输两个属性?

php - Div 定位不符合预期

html - 旋转的文本呈现效果不佳

list - 在 Liferay 中创建进度条

java - Android 通过单击按钮删除动态创建的微调器和按钮

javascript - 客户端(使用 JavaScript/JQuery)应该在多大程度上防止快速表单提交?

html - 防止绝对子级扩展父级

java - 动态更新观察者中的饼图?

c# - 在 UpdatePanel 中的 ASP.NET AJAX 回发期间更新客户端 javascript 数组变量的最简单方法?