Comment faire pour se lier au début gestionnaire d'événements JavaScript? (Exemple avec jQuery)

Question

JavaScript est la liaison tardive est grande. Mais comment puis-je lier au début quand je veux?

J'utilise jQuery pour ajouter des liens avec des gestionnaires d'événements dans une boucle à un div. La variable « ATAG » change dans la boucle. Lorsque je clique sur les liens plus tard, tous les liens alertent le même message, qui est la dernière valeur de « ATAG ». Comment puis-je lier un message d'alerte différent de tous les liens?

Tous les liens doivent alerter la valeur que « ATAG » lorsque le gestionnaire HAD d'événement a été ajouté, pas quand il a été cliqué.

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

Vous pouvez transmettre des données à la méthode bind:

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

Cela fera une copie de aTag, de sorte que chaque gestionnaire d'événements aura des valeurs différentes pour elle. Votre cas d'utilisation est précisément la raison pour laquelle ce paramètre bind existe.

code complet:

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

Vous pouvez également faire fonction d'emballage qui prend le texte d'alerte comme paramètre, et renvoie le gestionnaire d'événements

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

et remplacer

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

avec

nextTag.click(makeAlertHandler(aTag));

Answer 3

Vous devez conserver une copie de cette variable, comme ceci:

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 change chaque fois que vous en boucle, à la fin de la boucle, il est laissé comme le dernier élément de la boucle. Cependant, chacune des fonctions que vous créé point même variable. , Vous voulez plutôt une variable par, alors faites une copie locale comme je l'ai ci-dessus.

Vous pouvez également réduire cette baisse beaucoup avec enchaînant, mais je pense qu'il obscurcit le point dans ce cas, puisque la question est portée et références.