在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/

編輯：

事件發射是正確的喬爾的建議。然而，響應這個調用的監聽器在某種程度上是不正確的。

編輯2：

更新小提琴和代碼，使用瓦爾..仍然遇到了同樣的問題

Answer 1

如果你仔細觀察，你會發現changeMode確實解僱。深入研究jQuery對象，你會看到它被識別出來。它看起來不像被解僱的原因是你使用外部變量來標識名字。

這條線：

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

使用listn變量，其最後一個值是changeKeymap。如果您將功能更改爲：

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

它應按照您的預期報告。

注意：實際jQuery事件向下鑽取的屏幕粘貼。

Answer 2

最終的問題想通了，是類似這樣的：

JavaScript closure inside loops – simple practical example

這是在什麼喬爾建議的方針。 Underscore的_.each（）函數和咖啡腳本的.... do block本身就是這樣做的。