Как сделать раннюю привязку для обработчика событий в JavaScript?(пример с jQuery)

Question

Поздняя привязка JavaScript великолепна.Но как мне выполнить раннюю привязку, когда я захочу?

Я использую jQuery для добавления ссылок с обработчиками событий в цикле в div.Переменная 'aTag ' изменяется в цикле.Когда я нажимаю на ссылки позже, все ссылки выдают одно и то же сообщение, которое является последним значением 'aTag'.Как мне привязать другое предупреждающее сообщение ко всем ссылкам?

Все ссылки должны содержать предупреждение о значении, которое имел 'aTag' при добавлении обработчика событий, а не при нажатии на него.

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

Вы можете передавать данные в bind Метод:

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

Это сделает копию aTag, Таким образом, каждый обработчик событий будет иметь разные значения для него. Ваш корпус использования именно причина этого параметра bind существует.

Полный код:

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

Вы также можете сделать функцию обертки, которая принимает текст для предупреждения в качестве параметра и возвращает обработчик событий

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

и заменить

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

с участием

nextTag.click(makeAlertHandler(aTag));

Answer 3

Вам нужно сохранить копию этой переменной, например, так:

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

Тот Самый aTag переменная меняется каждый раз, когда вы выполняете цикл, в конце цикла она остается как последний элемент в цикле.Однако каждая из созданных вами функций указывает на это то же самое переменная.Вместо этого вам нужна переменная per, поэтому создайте локальную копию, как у меня выше.

Вы также можете значительно сократить это с помощью цепочки, но я чувствую, что в данном случае это затуманивает смысл, поскольку проблема заключается в области видимости и ссылках.