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

Question

我有一个脚本,我将元素附加到列表中.我需要在单击元素时调用函数,对于此函数,需要创建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);
}

所以问题是,有没有办法创建te onclick事件,为元素提供变量的正确值？

编辑:我添加了一部分代码.Li正在被创建,并且信息显示正确,唯一的问题是当试图创建它没有给出正确值的事件时,应该是在li

Answer 1

您可以通过在内部创建函数并将值保留在该函数的范围内来实现此目的.

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]);
    }

}?

jsfiddle:http://jsfiddle.net/Qf5JZ/1/