如何在使用JavaScript创建元素时添加onclick事件？

我有一个脚本，将元素添加到列表中。我需要在单击元素时调用一个函数，对于这个函数，创建li时需要变量的值（它是

li

内容）

我已经检查了添加

newLi.onclick=function（）{…}

等解决方案

这个解决方案的问题是，我在函数中没有得到正确的值，而是得到了列表中另一个元素的值

现在，这就是我创建元素的方式：

var ULlist = document.getElementById('ULid');
for(i=0;i<data.length;i++){
   var Value = data[i] //function to get data
   var newLi = document.createElement('li');
   newLi.appendChild(elements.createTextNode(Value));
   newLi.onclick = function(){alert(Value)} //not displaying the right value
   ULlist.appendChild(newLi);
}

var ULlist=document.getElementById（'ULid'）；
对于（i=0；i使用，尤其是API：

另一个选项更简单：在处理程序中使用TextNode值：

function handler(event) {
    var dataValue = event.target.firstChild.nodeValue; // value of TextNode created by elements.createTextNode(Data)
    // handle dataValue
}

newLi.addEventListener("click", handler, false);

使用，尤其是API：

另一个选项更简单：在处理程序中使用TextNode值：

function handler(event) {
    var dataValue = event.target.firstChild.nodeValue; // value of TextNode created by elements.createTextNode(Data)
    // handle dataValue
}

newLi.addEventListener("click", handler, false);

当我遇到这个问题时，我是这样解决的：

var ULlist = document.getElementById('ULid');
for(var i=0; i<data.length; i++){
   var index = i;
   (function() {
   var Value = data[index] //function to get data
   var newLi = document.createElement('li');
   newLi.appendChild(elements.createTextNode(Value));
   newLi.onclick = function() { ... };
   ULlist.appendChild(newLi);
   }());
}

var ULlist=document.getElementById（'ULid'）；
对于（var i=0；i当我遇到这个问题时，我是这样解决的：

var ULlist = document.getElementById('ULid');
for(var i=0; i<data.length; i++){
   var index = i;
   (function() {
   var Value = data[index] //function to get data
   var newLi = document.createElement('li');
   newLi.appendChild(elements.createTextNode(Value));
   newLi.onclick = function() { ... };
   ULlist.appendChild(newLi);
   }());
}

var ULlist=document.getElementById（'ULid'）；
对于（var i=0；i您可以通过在内部创建函数并将值保持在该函数的范围内来实现这一点

var data = [10, 20, 30, 40, 50, 60, 70];
addItems = function() {
    var list = document.getElementById("list");
    for (var i = 0; i < data.length; i++) {
        var newLi = document.createElement("li");
        newLi.innerHTML = i + 1;
        list.appendChild(newLi);
        (function(value){
        newLi.addEventListener("click", function() {
           alert(value);
        }, false);})(data[i]);
    }

}​

var数据=[10,20,30,40,50,60,70]；
addItems=函数（）{
var list=document.getElementById（“列表”）；
对于（变量i=0；i

jsIDLE:
您可以通过在函数内部创建函数并将值保留在该函数的范围内来实现这一点

var data = [10, 20, 30, 40, 50, 60, 70];
addItems = function() {
    var list = document.getElementById("list");
    for (var i = 0; i < data.length; i++) {
        var newLi = document.createElement("li");
        newLi.innerHTML = i + 1;
        list.appendChild(newLi);
        (function(value){
        newLi.addEventListener("click", function() {
           alert(value);
        }, false);})(data[i]);
    }

}​

var数据=[10,20,30,40,50,60,70]；
addItems=函数（）{
var list=document.getElementById（“列表”）；
对于（变量i=0；i

JSFIDLE:
您正在将事件处理程序添加到循环中，是吗？是的，当然，因此数据的值正在更改每个循环，并且函数的值对于我正在单击的'li'元素不是正确的。@Nuxy所以请显示您的完整循环…我添加了一些代码，但我认为它没有提供真正额外的信息。@Nuxy现在刚刚添加添加你的
.onclick
函数体，我们就有了一个自由的循环。你正在循环中添加事件处理程序，不是吗？是的，当然，所以数据的值正在改变每个循环，函数的值对于我正在单击的'li'元素不是正确的。@Nuxy所以请显示你的完整循环…我添加了一些代码，但我认为它并没有提供真正的额外信息。@Nuxy现在只需添加您的
.onclick
函数体，我们就可以免费使用“onclick”了。Alexander链接的文档中解释了它不适用于OP的原因（addEventListener也会出现同样的问题，但它不会破坏其他功能）@symcbean我不知道你在说什么，但是addEventListener是完全不相关的，任何回答仅仅说明应该使用它只是一个评论，而不是一个答案。我明天会在办公室尝试这个解决方案。我会告诉你它是否有效。对于第一个解决方案，每次添加一个“li”，它都会运行函数，并且但即使是“点击”。不知道确切原因，但我学到了更多关于事件和函数的知识。我正在采用“二极管”的解决方案，它需要一个外部阵列，但有效。感谢所花费的时间。使用“onclick”是错误的。Alexander链接的文档中解释了它不适用于OP的原因（addEventListener也会出现同样的问题，但它不会破坏其他功能）@symcbean我不知道你在说什么，但是addEventListener是完全不相关的，任何回答仅仅说明应该使用它只是一个评论，而不是一个答案。我明天会在办公室尝试这个解决方案。我会告诉你它是否有效。对于第一个解决方案，每次添加一个“li”，它都会运行函数，并且但即使是“点击”。不知道确切原因，但我了解了更多有关事件和功能的信息。我正在采用“二极管”的解决方案。它需要外部阵列，但有效。感谢所花的时间。我明天将在办公室尝试该解决方案。我会介绍它是否有效。感谢您的努力，但“二极管”的解决方案完全有效，就像你添加的一样。它工作得很好。但是…你是如何找到这个解决方案的！！：我明天将在办公室尝试这个解决方案。我会谈谈它是否有效。谢谢你的努力，但是“二极管”的解决方案完全有效，就像你添加的一样。它工作得很好。但是…你是如何找到这个解决方案的！！：D