时间戳

首页 > 解决方案 > Javascript 中是否有一种简单的方法可以将参数化事件侦听器添加到动态生成的 HTML 元素中？

javascript - Javascript 中是否有一种简单的方法可以将参数化事件侦听器添加到动态生成的 HTML 元素中？

问题描述

我有一个有序列表，其列表项是使用 Javascript 生成的（因为项目的数量/它们的内容是可变的），我想为每个项目添加一个事件侦听器，具体取决于它是列表的哪个元素 - 所以我想要第 1 个要调用的项目foo(1)、第 2 个要调用的元素foo(2)、第 30个要调用的元素foo(30)等。但是，当前所有元素都以与最后一个元素相同的侦听器结束。我正在使用的代码如下所示：

document.getElementById("mylist").innerHTML = "";
  for (i = 0; i < listitems.length; i++) {
    var li = document.createElement("li");
    li.setAttribute("id", "listitem" + i);
    li.addEventListener("click",function(){foo(i)})
    document.getElementById("mylist").appendChild(li);
  }

标签： javascript

解决方案

如果你使用 let 来声明你的 i 变量呢：

document.getElementById("mylist").innerHTML = "";
for (let i = 0; i < listitems.length; i++) {
    var li = document.createElement("li");
    li.setAttribute("id", "listitem" + i);
    li.addEventListener("click",function(){foo(i)})
    document.getElementById("mylist").appendChild(li);
}

参考：javascript for循环中的'let'与'var'，这是否意味着所有使用'var i =0'的for循环实际上应该是'let i =0'？

推荐阅读