如何將事件添加到僅在javascript中動態生成的每個元素

Question

我正在通過循環動態創建``li''元素，並且在將事件分配給動態生成的每個元素時遇到問題。我想對生成的每個li元素分配事件onclick。

這是代碼：

var not = [{
  "event": "It's your friend's Birthday. Wish him luck!!!",
  "view": "unread",
  "status": "read",
  "image": "<img src='cake.jpg' style='height:80px';'width:80px'>"
}]

var ids = ["id1", "id2", "id3", "id4", "id5"];
var lis = new Array(10);
var i = 0;

for (i; i < not.length; i++) {
  lis[i] = document.createElement("li");
  var obj = document.createTextNode(not[i].event);
  lis[i].appendChild(obj);
  document.body.appendChild(lis[i]);
  lis[i].setAttribute('id', ids[i]);
  var x = document.getElementById(ids[i]);
  x.addEventListener("click", func('ids[i]'));
  document.body.appendChild(ids[i]);

}

function func(a) {
  document.getElementById(a).innerHTML = "hello";
}

同樣，還有5個非對象。

Answer 1

嘗試更換

x.addEventListener("click", func());

通過

x.addEventListener("click", func);

如果使用func() ，則將調用函數並發送func()的返回值，而不是傳遞函數本身。

Answer 2

嘗試使用.bind將值綁定到事件偵聽器。 當你做

x.addEventListener("click", func('ids[i])');

1. 您正在將func返回值分配給事件偵聽器。
2. 'ids[i]'不是變量。 它是一個字符串。

將以下內容替換為：

x.addEventListener("click", func.bind(ids[i]));