Javascript addEventListener在循环内自动触发-或仅最后一个元素起作用

我有一个循环，在每次迭代中创建一个按钮。我正在为每个新创建的按钮附加一个事件侦听器，我需要传递唯一的参数。请参阅下面的代码（在本例中，只是将索引从循环传递到事件侦听器）

（i=0；i 0）的

{
var theButton=document.createElement（“按钮”）；
添加EventListener（“单击”，警报按钮（i））；
theButton.innerHTML=“添加”；
mySpan.appendChild（按钮）；
}
}
功能警报按钮（arg）{
返回函数（）{
警报（arg）；
};
}

目前，事件侦听器仅在最后一次迭代中实现的按钮上激发。如果在alertButton函数中删除“return function（）{}”，则每次迭代都会触发事件侦听器，而用户不会单击按钮

如果你有任何想法，我将不胜感激。我正在寻找其他有这个问题的人，但所提供的解决方案似乎对我不太有效。希望我忽略了一些简单的事情

---

谢谢

问题在于您分配侦听器的方式：

theButton.addEventListener("click", alertButton(i));

在上面的代码中，

alertButton（i）

将调用函数，而不会分配给它。若要将值传递给函数赋值，则应绑定值

theButton.addEventListener("click", alertButton.bind(this,i));

正如@Andreas所指出的，这是一个有效的例子

函数createButtons（）{
对于（变量i=0；i<5；i++）{
var theButton=document.createElement（“按钮”）；
addEventListener（“单击”，alertButton.bind（this，i））；
theButton.innerHTML=“添加”；
content.appendChild（按钮）；
}
}
功能警报按钮（arg）{
console.log（arg）
}
createButtons（）
如果要将值传递给函数赋值，则应绑定值编号。
。绑定（i）
将“仅”将上下文（
此
）设置为
i
的值，问题完全不同
allertButton
返回一个新函数，因此在
中调用它是正确的。addEventListener（“单击”，alertButton（i））
@Andreas我相信没有任何问题。在这里工作很好。OP中显示的代码现在没有多大意义，imho。什么是
worklog
？为什么循环用于
worklog.worklog
但循环本身仅使用
worklog.total
（由于
Hey all-感谢您的反馈，这隐藏了跳出的可能性。不幸的是，这个建议对我正在构建的内容仍然不起作用；不知道为什么。我发现它在JSFIDLE中工作得很好，这令人难以置信。我尝试了您的每个建议的变体，并继续看到类似的结果。还有，代码已脱离上下文。为了澄清，worklog.worklogs是我正在筛选的对象数组，但我仅在worklog.total大于0时才进行筛选。
theButton.addEventListener("click", alertButton.bind(this,i));