Wie frühe Bindung für Event-Handler in JavaScript zu tun? (Beispiel mit jQuery)

Question

JavaScript ist die späte Bindung ist groß. Aber wie kann ich früh binden, wenn ich will?

Ich bin mit jQuery Links hinzufügen mit Event-Handler in einer Schleife zu einem div. Die Variable ‚atag‘ ändert in der Schleife. Als ich später die Links klicken, alarmieren alle Verbindungen die gleiche Botschaft, die der letzte Wert von ‚Atag‘ ist. Wie kann ich eine andere Warnmeldung an alle Links binden?

Alle Links mit dem Wert aufmerksam machen sollten, dass ‚ATAG‘ war, als der Event-Handler hinzugefügt wurde, nicht, wenn darauf geklickt wurde.

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

Sie können Daten an die bind Methode übergeben:

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

Das wird eine Kopie aTag machen, so dass jeder Event-Handler unterschiedliche Werte für sie haben wird. Ihr Anwendungsfall ist genau der Grund, diese Parameter auf bind vorhanden ist.

Voll Code:

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

Sie können auch eine Wrapper-Funktion machen, die den Text zu Alarm als Parameter und gibt die Ereignisbehandlungsroutine

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

und ersetzen

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

mit

nextTag.click(makeAlertHandler(aTag));

Answer 3

Sie müssen eine Kopie dieser Variablen zu halten, wie folgt aus:

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(' ');
  }
}

Die aTag Variable ändert sich jedes Mal, wenn Schleife am Ende der Schleife ist es in der Schleife als letzter Punkt links. Jedoch jede der Funktionen erstellt Sie Punkt an diesem gleich Variable. Stattdessen wollen Sie eine Variable pro, so eine lokale Kopie zu machen, wie ich oben haben.

Sie können auch diese verkürzen unten eine Menge mit Chaining, aber ich fühle es den Punkt in diesem Fall trübt, da das Problem ist Scoping und Referenzen.