Передача параметров в обработчик события
element = document.getElementById("some_id");
for (var i = 0; i < 10; i++) { var childElement = document.createElement("span"); childElement.innerHTML = "элемент: №" + i + "<br>"; childElement.addEventListener( "click", function() { alert("элемент: №" + i); // здесь хочу передать параметр к какому то функцию, например "i" }, false ); element.appendChild(childElement); } Но, при клике к "span" элементам, появляется сообщение: "элемент: №10". Я ожидал номера будут разные и соответствовать номеру каждого элемента. Можете объяснить, почему так происходит? |
Цитата:
Вот здесь рассматривается практически Ваш случай - http://javascript.ru/basic/closure |
То что, в момент когда я кликаю по элементам переменная i=10 было понятно, но небыло понятно, как получить необходимый результат (т.е. как сделать чтобы alert выдал разные значения). Теперь понятно, спасибо за полезную ссылку.
Решение: element = document.getElementById("some_id"); for (var i = 0; i < 10; i++) { var childElement = document.createElement("span"); childElement.innerHTML = "элемент: №" + i + "<br>"; childElement.addEventListener( "click", function(i) { return function() { alert("элемент: №" + i);} }, false ); element.appendChild(childElement); } |
ERB,
вы уверены что ваш код полностью функциональный? |
Цитата:
<div id="some_id"></div> <script> element = document.getElementById("some_id"); for (var i = 0; i < 10; i++) { var childElement = document.createElement("span"); childElement.innerHTML = "элемент: №" + i + "<br>"; childElement.onclick = function(i) { return function() { alert("элемент: №" + i);} }(i); element.appendChild(childElement); } </script> |
А да, точно, спасибо большое
|
<div id="some_id"></div> <script> element = document.getElementById("some_id"); for (var i = 0; i < 10; i++) { var childElement = document.createElement("span"); childElement.innerHTML = "элемент: №" + i + "<br>"; childElement.onclick = (function(i){ alert("элемент: №" + i);}).bind(null, i) element.appendChild(childElement); } </script> Есть еще такой вариант. Работает в ES5-совместимых js-движках. |
Часовой пояс GMT +3, время: 22:16. |