5

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

3 回答 3

4

您可以将数据传递给该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(' ');
  }
}
于 2010-04-18T19:30:32.283 回答
1

您还可以制作一个包装函数，将要提醒的文本作为参数，并返回事件处理程序

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

并更换

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

和

nextTag.click(makeAlertHandler(aTag));
于 2010-04-18T19:39:14.493 回答
-2

您需要保留此变量的副本，如下所示：

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，所以像我上面那样制作一个本地副本。

您也可以通过链接将其缩短很多，但我觉得在这种情况下它掩盖了这一点，因为问题是范围和引用。

于 2010-04-18T19:29:11.277 回答