如何在 JavaScript 中对事件处理程序进行早期绑定?(以 jQuery 为例) [英] How to do early binding for event handler in JavaScript? (example with jQuery)

问题描述

JavaScript 的后期绑定很棒.但是我想怎么提前绑定呢?

JavaScript's late binding is great. But how do I early bind when I want to?

我正在使用 jQuery 将循环中的事件处理程序链接添加到 div.变量aTag"在循环中发生变化.当我稍后单击链接时，所有链接都会发出相同的消息，即aTag"的最后一个值.如何将不同的警报消息绑定到所有链接?

I am using jQuery to add links with event handlers in a loop to a div. The variable 'aTag ' changes in the loop. When I click the links later, all links alert the same message, which is the last value of 'aTag'. How do I bind a different alert message to all links?

所有链接都应该在添加事件处理程序时使用 'aTag' 的值发出警报，而不是在单击它时.

All links should alert with the value that 'aTag' had when the event handler was added, not when it was clicked.

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

推荐答案

您可以将数据传递给 bind 方法:

You can pass data to the bind method:

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

这将复制aTag，因此每个事件处理程序都有不同的值.您的用例正是此 bind 参数存在的原因.

This will make a copy of aTag, so each event handler will have different values for it. Your use case is precisely the reason this parameter to bind exists.

完整代码:

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

这篇关于如何在 JavaScript 中对事件处理程序进行早期绑定?(以 jQuery 为例)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！