jQuery的點擊過濾器

Question

在過去，我已經使用以下格式的jQuery例如創建點擊事件處理程序，如果我有以下的HTML

<div class="new-folder">Click me</div> 

然後使用這個jQuery的分配點擊處理程序並過濾點擊。

$('div').on('click','.new-folder',function(){}); 

這會趕上與相應的類div元素上的所有點擊，但只運行函數如果元素有一類新的文件夾中。這很好。

但是，如果我試圖篩選這樣的按鈕元素的點擊事件：

<button type="button" class="new-folder">Click me</button> 

選擇器（下）並不爲我工作。

$('button').on('click','.new-folder',function(){}); 

如果我將該類移動到原始項目選擇器，它確實有效。所以這條線（如下）確實按預期工作。

$('button.new-folder').on('click',function(){}); 

我一直雖然過濾器的方法是更好，因爲它具有動態內容的工作，也就是說，如果按鈕沒有類或添加有代碼的處理程序被分配過濾器的方法的工作原理之後，但在沒有過濾器的方法會失敗。

我敢肯定，這裏有一些非常簡單的東西。按鈕有什麼不同？

如果有問題，請使用jQuery 1.10.2。

Answer 1

$('div').on('click','.new-folder',function(){});格式爲jQuery的event delegation syntax爲.on() method。作爲文檔解釋，選擇作爲第二個參數是從所述第一選擇器在語句（重點煤礦）的後代：

選擇器串來過濾的後裔觸發事件的選定元素 的 。如果選擇器爲空或省略，則在到達選定元素時始終觸發事件 。

因此，對於$('button').on('click','.new-folder',function(){});工作，你需要一個類的元素。 new-folder成爲<button>元素的後代。

Answer 2

試試這個：

$('body').on('click','button.new-folder',function(){}); 

也就是說，綁定到一個存在於該JS運行時刻（身體中存在的頁面加載時），並在第二個參數提供一個選擇的元素。上（）。當在body元素上發生點擊時，jQuery檢查它是否應用於匹配button.new-folder選擇器的那個元素的子元素。

進一步reading

Answer 3

這裏的2個表達之間的區別：

$('button').on('click','.new-folder',function(){}); // delegates a click event to the all the child elements with class 'new-folder' inside the button elements. 
$('button.new-folder').on('click',function(){}); // delegates a click event to the element button with class 'new-folder' 

Answer 4

此代碼：

$('div').on('click','.new-folder',function(){}); 

難道就沒有觸發：

<div class="new-folder">Click me</div> 

因爲選擇器.new-folder在$（'div'）的後代上觸發，在這種情況下不存在。

我認爲這是爲你工作，因爲你的代碼的HTML標記等具有div容器別處：

<div> 
..... 
<div class="new-folder">Click me</div> 
.... 
</div>