Как сгенерировать обработчики событий с помощью цикла в Javascript?

Например, у меня есть 10 тегов, сгенерированных из ответа AJAX:

<a href="#" id="b1">b1</a>
<a href="#" id="b2">b2</a>
<a href="#" id="b3">b3</a>
<a href="#" id="b4">b4</a>
<a href="#" id="b5">b5</a>
<a href="#" id="b6">b6</a>
<a href="#" id="b7">b7</a>
<a href="#" id="b8">b8</a>
<a href="#" id="b9">b9</a>
<a href="#" id="b10">b10</a>

Мне нужно назначить событие onclick каждому из них через цикл:

for(i=1; i<11; i++) {
    document.getElementById("b"+i).onclick=function() {
        alert(i);
    }
}

Это не работает, он назначает onclick последнему тегу и предупреждает "11". Как я могу заставить это работать? Я бы предпочел не использовать jQuery.

Ответ 1

Все ваши обработчики разделяют одну и ту же переменную i.

Вам нужно поместить каждый обработчик в отдельную функцию, которая принимает i как параметр, так что каждый получает свою собственную переменную:

function handleElement(i) {
    document.getElementById("b"+i).onclick=function() {
        alert(i);
    };
}

for(i=1; i<11; i++) 
    handleElement(i);

Ответ 2

Закрытие - это то, что вы ищете:

for(i=1; i<11; i++) {
    (function(i) {
        document.getElementById("b"+i).onclick=function() {
            alert(i);
        };
    })(i);
}

Ответ 3

Существует два способа использования закрытия этой проблемы. Идея состоит в том, чтобы создать область с моментальным снимком переменной "i" для каждой итерации, которая будет использоваться обработчиком событий.

Решение № 1 (как было упомянуто Кевином):

for(i=1; i<11; i++) {
    (function(num) {

       document.getElementById("b"+num).addEventListener('click', function() {
            alert(num);
       });

    })(i);
}

Решение № 2:

for (i=1; i<11; i++) {
    document.getElementById("b"+i).addEventListener('click', (function(){
        var num = i;
        return function() {
            alert(num);
        }
    })());
}