如何在使用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事件？

回答

相關問題