Dynamiczne tworzenie obiektów oraz przypisywanie im zdarzeń - javascript.

Question

Witam, kod wygląda następująco:

for (var i = 0; i <= 10; i++) {
	var object = '<div id="object'+i+'"> Object'+i+'</div>'

	var node = document.createElement("LI");
	node.innerHTML=object;
	document.getElementById('my_ul').appendChild(node);

	document.getElementById('object'+i).addEventListener('click', function(){
		console.log('Object: '+i);
	})
}

Tworzenie elementów listy my_ul przebiega pomyślnie, czyli otrzymuję to co chciałem. Listę li, w których dodatkowo są divy.
Chciałbym, aby po kliknięciu w każdego diva, wykonywało się zdarzenie click, które w konsoli wypisuje numerek klikniętego diva.

Jednakże ten kod nie działa.
Wie ktoś jak tworzyć takie dynamiczne zdarzenia?

Answer 1

Wyjmij nasłuchiwanie z pętli bo przecież jeżeli utworzyłeś już listę to nasłuchiwanie powinno odbywać się na tej liście czyli ul_li (propagacja zdarzeń spowoduje przechwycenie kliknięcia przez li). W funkcji sprawdź target zdarzenia.

function(e){
console.log(e.target);