如何将事件添加到仅在javascript中动态生成的每个元素

Question

i am creating 'li' element dynamically through a loop and im getting problem in assigning event to each element that is generated dynamically.I want to do assign event onclick on each li element that is generated.

Here is the code:

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";
}

similarly there are 5 more not objects.

Answer 1

Try replacing

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

by

x.addEventListener("click", func);

If you use func() you are calling the function and send the return value of func() , instead of passing the function itself.

Answer 2

Try using .bind , to bind value to event listener. When you do

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

1. You are assigning return value of func to event listener.
2. 'ids[i]' is not a variable. Its a string.

Replace following to:

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