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

我有一个脚本，我将元素附加到列表中。当我点击一个函数被调用的元素时，我需要这个函数，并且对于这个函数，当创建li时需要一个变量的值（这是li的内容）。如何在使用JavaScript创建元素时添加onclick事件？

我检查了解决方案，如添加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

来源

2012-08-07 Nuxy

您要添加的事件处理程序在一个循环中，不是吗？ – Esailija 2012-08-07 12:59:21

是的，当然，所以Data的值在每个循环中都在变化，并且函数的值对于我正在单击的'li'元素不正确。 – Nuxy 2012-08-07 13:00:26

@Nuxy所以请显示您的完整循环... – Alnitak 2012-08-07 13:01:15

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

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/

来源

2012-08-07 13:25:30 Diode

它完全工作，谢谢。 – Nuxy 2012-08-08 06:48:36

使用DOM2 event listeners cointained的价值，特别是element.addEventListener API ：

function clickHandlerFor(data) { 
    return function(event) { 
     var li = event.target; 
     // do something with data and li. 
    }; 
} 

for (...) { 
    var Data = ... //function to get data 
    var newLi = elements.createElement('li'); 
    newLi.appendChild(elements.createTextNode(Data)); 
    newLi.addEventListener("click", clickHandlerFor(Data), false); 
    ULlist.appendChild(newLi); 
}

另一种选择是更简单：在你的处理器使用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);

来源

2012-08-07 12:56:36

+1 :(以前由某人解释为什么没有解释原因） – symcbean 2012-08-07 13:03:06

使用'onclick'是错误的。它不适用于OP的原因在Alexander链接的文档中有解释（addEventListener发生同样的问题 - 但它也不会破坏其他内容）。 – symcbean 2012-08-07 13:07:00

@symcbean我不知道你在说什么，但addEventListener是完全不相关的，任何答案只是说应该使用它只是一个评论而不是答案。 – Esailija 2012-08-07 13:09:07

当我遇到过这个问题，我解决了我像这样：

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'); 
for(var i=0; i<data.length; i++){ 
    (function(index) { 
     var Value = data[index] //function to get data 
     var newLi = document.createElement('li'); 
     newLi.appendChild(elements.createTextNode(Value)); 
     newLi.onclick = function() { ... }; 
     ULlist.appendChild(newLi); 
    }(i)); 
}

试试这个，让我知道它是否工作。

来源

2012-08-07 13:06:42 sedran

对不起，我编辑了它:) – sedran 2012-08-07 13:07:58

明天我会在办公室尝试解决方案。会说一些关于它是否有效的说法。 – Nuxy 2012-08-07 13:14:05

感谢您的努力，但'二极管'的解决方案完全工作，这就像你添加。 – Nuxy 2012-08-08 06:50:07

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

回答

相关问题