jQuery的。對與DoubleClick事件

Question

爲什麼將這項工作：

$(document).on("dblclick", "#areaA tr:has(td)", function(e) { 
    //code here 
}); 

這並不

$("#areaA tr:has(td)").on('dblclick', function(e) { 
    //Code here 
}); 

我下面的jQuery的文檔頁面上的例子正好，但我雙擊不不開火。當我以第一種方式做到這一點時，它很有效，但似乎它會兩次觸發事件。

這是在Kendo UI網格的上下文中。

這兩段代碼真的有區別嗎？

Answer 1

主要區別在於每次單擊時都會檢查第一個條件。因此，如果動態添加內部編號爲areaA或tr或td的元素，則只有第一個可以工作。

Answer 2

這兩段代碼真的有區別嗎？

是的。第一段代碼是委託事件處理的一種形式，其中處理程序由觸發由後代元素觸發的文檔的事件觸發。第二個是將事件處理程序綁定到jQuery爲指定選擇器返回的實際元素（在 這個 的情況下  #areaA tr:has(td)）。

下面是從jQuery的文檔的相關信息：

第一段代碼：

委託事件的優勢在於他們可以從被添加到後代元素處理事件文件在以後的 時間。通過挑選一個保證在 時間附帶委託事件處理程序的元素，可以使用委派的 事件來避免需要頻繁附加和刪除事件處理程序。

第二個代碼段：

的事件處理程序僅結合到當前選擇的元素;他們必須在當時存在您的代碼調用。對（）

Answer 3

你描述的作品，因爲你選擇一個靜態的父母，然後動態的孩子，它遵循的事件綁定到規則的第一種方法使用.on方法動態創建元素。

下面是.on方法的語法，它聽起來像你已經做了一些研究。

$(selector).on(event,childSelector,data,function,map) 

所以，如果我要綁定到動態元素與.on，我不得不美元符號選擇靜態父元素第一屆時，.on方法中，選擇動態子元素。你的情況正確使用的情況下將工作是這樣的：

$("body").on('dblclick', '#areaA tr:has(td)', function(e) { 
    //Code here 
}); 

既然你提到它不工作我假設#areaA不是一個靜態的元素。你可以將body替換爲更相關的靜態元素，或者只是將其留給body，它並不重要。