在jquery触发器上调用不正确的处理程序

Question

我在尝试在jQuery中注册和触发事件时遇到了一个奇怪的问题。我的示例代码存根是这样的：

events = {"changeMode": ["mode1"], "changeKeymap": ["keymap1"]}

for(var event in events) {
  var listeners = events[event];
  for (i=0; i<listeners.length; i++)
  {
    var listn = listeners[i]
    console.log("Activate listener", listn, " For event: ", event);
    $("#testing").on(event, function(e, d) {
      console.log("Event: ", event);
      console.log("Listener invoked is: ", listn);
      console.log("Event which is passed is: ", e);
      console.log("Data is: ", d);
    });
  }
}

$("#testing").trigger("changeMode", "random data");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testing"></div>

正如您所看到的，当我尝试调用“changeMode”时，实际调用的侦听器是“changeKeymap”。实际上，调用的侦听器是最后定义的侦听器，因此我假设它以某种方式覆盖其他侦听器。 （我实际上有更大的代码，但基本上这就是我遇到的错误归结为。）任何人都可以提出正在发生的事情。

这是JSFiddle：https://jsfiddle.net/7xyyggz8/

编辑：

Joel建议的事件是正确的。然而，响应于此而调用的侦听器在某种程度上是不正确的。

编辑2：

更新了使用变量的小提琴和代码..仍遇到同样的问题

Answer 1

如果你仔细观察，你会发现changeMode确实被解雇了。深入查看jQuery对象，您将看到它已被识别。它没有被解雇的原因是你正在使用外部变量来识别名称。

这一行：

console.log("Listener invoked is: ", listn);

正在使用最后一个值为listn的{​​{1}}变量。如果您将功能更改为：

changeKeymap

它应该按照您的预期报告。

注意：实际jQuery事件向下钻取的屏幕粘贴。

Answer 2

最终这个问题被认为与此类似：

JavaScript closure inside loops – simple practical example

这与乔尔建议的一致。下划线的_.each（）函数和咖啡脚本的.... do block本身就是这样做的。