Cómo hacer temprano vinculante para controlador de eventos en JavaScript? (Ejemplo con jQuery)

Question

JavaScript es tarde unión es grande. Pero, ¿cómo hacer que temprano se unen cuando quiero?

Estoy usando jQuery para añadir enlaces con los controladores de eventos en un bucle para un div. La variable 'ATAG' cambia en el bucle. Cuando hago clic en los enlaces más tarde, todos los enlaces alertan al mismo mensaje, que es el último valor de 'ATAG'. ¿Cómo puedo enlazar un mensaje de alerta diferente a todos los enlaces?

Todos los enlaces debe alertar con el valor que 'ATAG' tenía cuando se añadió el controlador de eventos, no cuando se ha hecho clic.

for (aTag in tagList) {
  if (tagList.hasOwnProperty(aTag)) {
    nextTag = $('<a href="#"></a>');
    nextTag.text(aTag);
    nextTag.click(function() { alert(aTag); });
    $('#mydiv').append(nextTag);
    $('#mydiv').append(' ');
  }
}

Answer 1

Puede pasar datos al método bind:

nextTag.bind('click', {aTag: aTag}, function(event) {
    alert(event.data.aTag);
});

Esto hará una copia de aTag, por lo que cada controlador de eventos tendrá valores diferentes para la misma. Su caso de uso es precisamente la razón de ser de este parámetro para bind.

código completo:

for (aTag in tagList) {
  if (tagList.hasOwnProperty(aTag)) {
    nextTag = $('<a href="#"></a>');
    nextTag.text(aTag);
    nextTag.bind('click', {aTag: aTag}, function(event) {
      alert(event.data.aTag);
    });
    $('#mydiv').append(nextTag);
    $('#mydiv').append(' ');
  }
}

Answer 2

También puede hacer una función de contenedor que toma el texto de alerta como parámetro y devuelve el controlador de eventos

function makeAlertHandler(txt) {
  return function() { alert(txt); }
}

y reemplace

nextTag.click(function() { alert(aTag); });   

con

nextTag.click(makeAlertHandler(aTag));

Answer 3

Es necesario tener una copia de esta variable, como esto:

for (aTag in tagList) {
  if (tagList.hasOwnProperty(aTag)) {
    nextTag = $('<a href="#"></a>');
    nextTag.text(aTag);
    var laTag = aTag;
    nextTag.click(function() { alert(laTag); });
    $('#mydiv').append(nextTag);
    $('#mydiv').append(' ');
  }
}

La variable aTag está cambiando cada vez que bucle, al final del bucle se deja como último punto en el bucle. Sin embargo, cada una de las funciones que se crearon en este punto mismo variable. En su lugar, usted quiere una variable por, por lo que hacer una copia local que tengo arriba.

También puede acortar este abajo mucho con el encadenamiento, pero siento que nubla el punto en este caso, ya que la cuestión se alcance y referencias.