jQuery on（）選擇器

Question

selector在jQuery on()方法中的用途是什麼？

在什麼情況下是

$("#fish").on("click", ".button", function() { 
    // something 
}); 

比說好，

$("#fish").find(".button").on("click", function() { 
    // something 
}); 

？

我枕着jQuery documention發現：

如果省略選擇或爲空，事件處理程序被稱爲直接或者直接結合。每次在選定元素上發生事件時，都會調用處理程序，無論它是直接發生在元素還是來自後代（內部）元素的氣泡。

當提供選擇器時，事件處理程序被稱爲委託。當事件直接發生在綁定元素上時，不會調用該處理程序，而只會爲與選擇器匹配的後代（內部元素）調用該處理程序。 jQuery將事件從事件目標引發到處理程序所附的元素（即，最內層到最外層的元素），並沿着匹配選擇器的路徑上的任何元素運行處理程序。

上午我在說正確的，因爲不同的是，在我的第一個例子，該事件被綁定到#fish，但只監聽事件從.buttons冒泡，而在第二個例子中，事件勢必每個.buttons？如果有的話，這有什麼影響？ ：S

所以如果事件綁定到#fish，當你點擊一個.button時，有無論如何知道哪個.button被點擊了？這將引用#fish而不是.button，是否正確？

Answer 1

示例＃1將綁定動態創建按鈕的事件，只要它們是#fish的後代。在綁定後創建的任何按鈕都會調用click處理程序。如果您不想選擇祖先元素，則還可以綁定到$(document)。

示例＃2將只綁定到綁定時DOM中的按鈕。任何動態創建的元素都不會收到處理程序。

在這兩個示例中，this和$(this)將引用被點擊的按鈕，而不是#fish。

看看這個jsFiddle的演示。你會在控制檯看到this指的是不是#fish的按鈕。

$('#fish').on('click', '.button', function(){ 
    console.log(this.id); 
}); 

Answer 2

是的，這是正確的。當您使用選擇器調用on方法時，它將創建一個委託事件。

$("#fish").on("click", ".button", function() { 

不一樣：

$("#fish").delegate(".button", "click", function() { 

該事件被綁定到#fish元素，但它只是呼籲.button元素的點擊事件處理程序。這意味着當您綁定元素時，.button元素不必存在，只有#fish元素。