Come fare presto vincolante per gestore di eventi in JavaScript? (Esempio con jQuery)

Question

è l'associazione tardiva JavaScript è grande. Ma come faccio presto si legano quando voglio?

Sto usando jQuery per aggiungere collegamenti con gestori di eventi in un ciclo per un div. La variabile 'ATAG' cambia nel ciclo. Perché quando clicco sul link in seguito i link di tutti avvertono lo stesso messaggio, che è l'ultimo valore di 'ATAG'. Come posso associare un messaggio di avviso diverso per tutti i link?

Tutti i link dovrebbe avvisare con il valore che 'ATAG' aveva quando è stato aggiunto il gestore di eventi, non quando è stato cliccato.

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

È possibile passare i dati al metodo bind:

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

Questo farà una copia di aTag, in modo che ogni gestore di eventi avrà valori diversi per esso. Il tuo caso d'uso è precisamente il motivo questo parametro per bind esiste.

codice 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

Si può anche fare una funzione wrapper che prende il testo da avviso come parametro, e restituisce il gestore di eventi

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

e sostituire

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

con

nextTag.click(makeAlertHandler(aTag));

Answer 3

È necessario mantenere una copia di questa variabile, in questo modo:

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 variabile aTag sta cambiando ogni volta che si esegue un ciclo, alla fine del ciclo è lasciato come ultimo elemento nel ciclo. Tuttavia, ciascuna delle funzioni si è creato punto in questo stesso variabile. Invece, si vuole una variabile per, in modo da creare una copia locale come ho sopra.

Si può anche ridurre questa giù un sacco con il concatenamento, ma sento che offusca il punto in questo caso, dal momento che il problema è scoping e riferimenti.