change - event loop javascript

¿Cómo generar manejadores de eventos con loop en Javascript?

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Javascript infame problema de bucle? [duplicar] 5 respuestas

Por ejemplo, tengo 10 etiquetas generadas a partir de una respuesta 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>

Necesito asignar el evento onclick a cada uno de ellos a través del bucle:

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

Esto no funciona, solo asigna onclick a la última etiqueta y alerta "11". ¿Cómo puedo conseguir que esto funcione? Prefiero no usar jQuery.

Answer 1

Hay dos formas de usar el cierre en este problema. La idea es crear un ámbito con una instantánea de la variable "i" para cada iteración que utilizará el controlador de eventos.

Solución # 1 (como fue mencionado por Kevin):

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

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

    })(i);
}

Solución # 2:

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

Answer 2

Todos sus manejadores comparten la misma variable i .

Debe colocar cada controlador en una función separada que tome i como parámetro para que cada uno obtenga su propia variable:

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

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

Answer 3

Un cierre es lo que estás buscando:

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