Динамическое добавление обработчиков событий

Я пытаюсь динамически добавлять события в свой проект. Где нужно добавить несколько событий. Его трудно описать функциональность проекта, поэтому я создал очень простой пример кода, чтобы продемонстрировать функциональность, которую я пытаюсь создать. Я пытаюсь создать несколько прослушивателей событий для использования для цикла, и тело этого прослушивателя событий использует переменную iterator for loop при ее выполнении. Но проблема заключается в том, что во всех прослушивателях событий используется только последнее значение цикла for. См. Код ниже.Динамическое добавление обработчиков событий

<script> 
    function addlisteners() { 
     var allinputs = document.body.getElementsByTagName("input"); 

     for (var i = 0; i < allinputs.length; i++) { 
      allinputs[i].onclick = function() { 
      alert("hii, I am" + i + "input field"); 
      } 
     } 
    } 
    window.onload = function() { 
    for (var i = 0; i < 10; i++) { 
     var input = document.createElement("input"); 
     document.body.appendChild(input); 
    } 
    addlisteners(); 
} 
</script> 
</head> 

<body> 
</body>

Таким образом, если код выполняется и пытался, то вы увидите, что при нажатии на всех полях ввода отображает последнее значение I, как это, «HII, я 10 поле ввода». Ответьте, если вы знаете, как создать этот обработчик событий таким образом, чтобы он отображал соответствующее значение i. то есть; «hii, я 1 поле ввода» для поля ввода 1 и «hii, я 2 поля ввода» для поля ввода 2 и так далее. Большое вам спасибо за ваше время.

источник

2013-09-26 Sameeksha Kumari

может быть dublicates http://stackoverflow.com/questions/16825698/dynamically-adding-event-handler-in-javascript?rq=1 – zura

http://stackoverflow.com/questions/3572480/please-explain- использование-javascript-closures-in-loops, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures – Andreas

Изменить фрагмент кода

allinputs[i].onclick = (function(x) { 
     //alert("hii, I am" + j + "input field"); 
     return function(){ 
      alert("hii, I am" + x + "input field"); 
     } 
    })(i);

FIDDLE, ссылка из Here.

источник

2013-09-26 07:39:59

Динамическое добавление обработчиков событий

ответ

Смежные вопросы