Cómo almacenar variables locales en las funciones de clic de jQuery?

Question

Estoy tratando de averiguar cómo almacenar valores de variables externas en las funciones creadas durante el evento click() de jQuery. Aquí hay una muestra del código con el que estoy trabajando ahora.

for(var i=0; i<3; i++){ 
    $('#tmpid'+i).click(function(){ 
     var gid = i; 
     alert(gid); 
    }); 
} 

<div id="tmpid0">1al</div> 
<div id="tmpid1">asd</div> 
<div id="tmpid2">qwe</div> 

Así que lo que está sucediendo es que los eventos están imponiendo correctamente, pero el valor de 'GID' es siempre el último valor incrementado de 'i'. No estoy seguro de cómo configurar la variable privada en esta situación.

Answer 1

Puede crear un cierre y asignar i a una variable local del cierre. A la variable gid se le asignará el valor de i en el punto en que se creó el cierre en lugar de cuando se ejecuta la función.

for(var i=0; i<3; i++){ 
    (function() { 
     var gid = i; 
     $('#tmpid'+i).click(function(){ 
      alert(gid); 
     }); 
    })(); 
} 

Answer 2

Ha creado un cierre, donde la variable "i" se comparte entre varios manejadores de clics.

Desde Javascript no tiene ámbito de bloque, tendrá que pasar "i" para una nueva función por lo que se copia por valor a una nueva instancia:

function bindStuff(i) { 
    $('#tmpid'+i).click(function(e){ 
        var gid = i; 
        alert(gid); 
      }); 
} 

for(var i=0; i<3; i++){ bindStuff(i); } 

Aquí es otra pregunta similar : JavaScript closure inside loops – simple practical example

Answer 3

Leí una copia de seguridad del método de datos nativos() de jQuery. Implementé esto y funciona también. Oculta parte de la funcionalidad real de cómo se manejan los cierres, pero es simple y bastante limpio de implementar.

Answer 4

for(var i=0; i<3; i++){ 
    $('#tmpid'+i).click((function(gid){ 
     return function(){ 
      alert(gid); 
     } 
    })(i)); 
} 

hay muchas maneras de hacerlo, esta funciona y parece fácil.

edición

de otra manera:

for(var i=0; i<3; i++){ 
    $('#tmpid'+i).click([i],function(e){ 
     alert(e.data[0]); 
    }); 

Answer 5

Alternativamente, el primer argumento de clic (o se unen) para jQuery es un objeto que se apega al evento como datos.

for(var i=0; i<3; i++){ 
    $('#tmpid'+i).click({gid : i}, function(e) { 
     alert(e.data.gid); 
    }); 
} 

Me parece un poco más legible que la solución de cierre, pero todo se reduce al gusto.