Как сделать раннее связывание для обработчика событий в 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, поэтому сделайте локальную копию, как у меня выше.

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