使用.on（）進行點擊事件的奇怪行爲 - 觸發兩次

Question

我已經檢查了有關點擊事件發射兩次的答案。但我有一個關於使用.on()的問題。

通常情況下，我使用這樣的動態添加的元素，它總是工作得很好：

$(document).on("click", "dynElement", function(){}) 

在目前的網站我的工作，我用了好幾遍。但我想要實現的功能，比方說，一個動態的「跳頁」，點擊頁碼觸發兩次：

$(document).on("click", ".jumpTo .number", function(){ 
    console.log("Jump"); 
}); 

試圖找到這種行爲的起源，我想這語法工作正常：

$(".jumpTo").on("click", ".number", function(){ 
    console.log("Jump"); 
}); 

誰能解釋什麼是這兩種不同的語法（這看起來很相似，我）有什麼區別？

而且可選，爲什麼$(document).on("click", ".jumpTo .number", function(){})觸發兩次？ （可選，因爲我無法在Fiddle中重現此行爲，所有內容都按其應有的原樣運行）。

Answer 1

$(document).on("click", ".jumpTo .number", function(){ 
    console.log("Jump"); 
}); 

在這種情況下，點擊處理程序設置在文檔對象上。因此，無論何時您單擊頁面上的某個位置，它都會觸發並在其中查找「.jumpTo .number」元素。如果它發現它，它將檢查點擊是否在它上面，並且你的函數將被執行。

$(".jumpTo").on("click", ".number", function(){ 
    console.log("Jump"); 
}); 

這裏單擊處理程序將在.jumpTo

正如Al.G說，大概是這樣的代碼被執行多次，所以你居然多次，因而二次燒成添加處理程序。 一個解決這個問題的辦法是做這樣的事情：

$(".jumpTo").unbind("click").on("click"... 

另一個是改變你的代碼，以確保。對（）的調用沒有得到執行兩次。