Как привязать функцию к каждому элементу по клику?

Question

[vovastradamus]

Добрый день.
Как привязать к кажому созданному элементу вызов функции (вызов по клик)?
Привязка клика происходит, но привязывается только последний элемент массива.
Вот пример кода:

var b = document.querySelector('body');
var arr = [1,4,2,43,54,30,6,3];
for (var i = 0; i < arr.length; i++) {
  var el = document.createElement('div');
  var tag = arr[i];
  el.appendChild(document.createTextNode('chto-to #'+tag));
	b.appendChild(el);
  el.addEventListener('click', function(e) {
    someFunc(tag);
  });
}
function someFunc(v) {
  console.log(v);
}

Ссылка на fiddle

Comments

[OVK2015]

Применительно к вашему коду, как-то так:

var b = document.querySelector('body');
var arr = [1,4,2,43,54,30,6,3];
for (var i = 0; i < arr.length; i++) {
  var el = document.createElement('div');
  var tag = arr[i];
  el.appendChild(document.createTextNode('chto-to #'+tag));
  b.appendChild(el);
  el.addEventListener('click', function(e) {
    someFunc(e);
  });
}
function someFunc(v) {
  console.log(v.target.innerHTML.split(' ')[1]);
}

Answer 1

[lega]

Замыкание: https://jsfiddle.net/lega911/5tavj5u6/

так же можно воспользоваться let (из ES6+):

var b = document.querySelector('body');
var arr = [1,4,2,43,54,30,6,3];
for (let tag of arr) {
  var el = document.createElement('div');
  el.appendChild(document.createTextNode('chto-to #'+tag));
	b.appendChild(el);
  el.addEventListener('click', function(e) {
    someFunc(tag);
  });
}
function someFunc(v) {
  console.log(v);
}

Comments

[lega]

А вообще для вашего когда нужно использовать замыкание:

(function(tag){
el.addEventListener('click', function(e) {
someFunc(tag);
});
})(tag);

[lega]

https://jsfiddle.net/lega911/5tavj5u6/

[Алексей Зуев]

Очередная реклама angularlight?)

[vovastradamus]

lega: спасибо! Если это возможно, то поменяйте ответ на ссылку с замыканием.

Answer 2

[Вячеслав Лебедев]

Лучшее решение - это делегирование событий!
Общая идея: есть обертка на которую вешается слушатель, а из за всплытия клика можно узнать на каком элементе был клик, ставим к примеру на него атрибут data-uniq=1 и проверяем его при клике getAttribute('data-uniq'). Так будет намного лучше. :)