jQuery的差異上

Question

之間有什麼區別：

$("a.myclass").on("click", callback); 

和

$(document).on("click", "a.myclass", callback);? 

Answer 1

第二種方法時a.myclass被添加到DOM動態被使用（例如，不當文檔被加載在場）。理想情況下，您希望使用DOM中比document更接近的元素來獲得最佳性能^*。都綁定到a.myclass上的點擊事件。上.on()

每jQuery的docs關於第二格式：

的事件處理程序僅結合到當前選擇的元素;在代碼調用.on（）時，頁面上必須存在 。 要確保元素存在並且可以選擇，請在頁面上的HTML標記中的 HTML標記中對元素執行文檔就緒處理程序內的事件 綁定。如果新頁面被注入頁面， 選擇元素並附加事件處理程序，當新的HTML被放置到頁面中時，頁面中的內容爲 。

^{*在文檔樹頂部附近附加許多委託事件處理程序可能會降低性能。每次事件發生時，jQuery都必須將該類型的所有附加事件的所有選擇器與從事件目標到文檔頂部的路徑中的每個元素進行比較。爲獲得最佳性能，請在儘可能靠近目標元素的文檔位置附加委派事件。避免過多使用文檔或document.body來處理大型文檔上的委派事件。}

Answer 2

$("a.myclass").on("click", callback); 

有了這個代碼，jQuery的抓住匹配a.myclass和重視的事件處理程序他們的所有元素。

$(document).on("click", "a.myclass", callback); 

這裏，jQuery的抓住document並附加事件處理點擊事件冒泡到它（原先匹配a.myclass元素觸發）。

當您單擊a.myclass時，第一個將在第二個之前執行，因爲代碼尚未「冒泡」到包含的文檔。

第二個優點是，如j08691所述，匹配該描述的元素在上面的腳本執行後（或與該描述相匹配）添加到頁面中仍然會觸發回調。

的缺點是，如果在某些時候你寫的代碼

$('a').on('click', function(e){ 
    e.stopPropagation(); 
}) 

或

$('a').on('click', function(e){ 
    return false; 
}) 

...那麼第二種方法將永遠不會觸發。儘管這是一個邊緣案例，你可能不需要擔心它。