瞭解有關相關選擇器（事件委託）方法的jQuery

我需要一些理解jQuery的.on()方法的建議。當我使用.on()時，其中一種情況如下：瞭解有關相關選擇器（事件委託）方法的jQuery

我想將clickhandler附加到尚未處於標記中的元素。

$('#somediv').on('click', '#trigger', function() { 
    // an awesome click event 
}); 

$('#somediv').append('<span id="trigger">Click</span>');

我現在的問題是，如果#somediv不會是什麼標記爲好。我應該使用哪個父母選擇器.on()方法。我可以只使用$('body').on()還是有附加的特定規則。

感謝

來源

2014-10-29 supersize

你說得對。當您委派事件時，總是找到在標記中存在的最接近的父代。如果不存在，使用'$（document）'。 – 2014-10-29 14:40:32

@Vega，但爲什麼我會始終使用最親近的父母。事實上，即使給出了'＃somediv'，我使用'$（'body'）'有什麼區別！性能，而不是語義..？ – supersize 2014-10-29 14:54:01

使用最接近的父親是爲了避免每次發生事件時都調用處理程序。例如：假設你像'$（'body'）一樣委託一個點擊處理程序。append（'點擊'）;'。 jQuery將處理程序綁定到body元素，並在內部檢查被單擊的元素是否爲「＃trigger」並執行處理程序。注意：檢查將在每次點擊正文時發生，這就是爲什麼我們找到最接近的父級來限制點擊執行的原因。我希望我解釋正確。 – 2014-10-29 15:01:04

你得到它的權利，這是更好地發現，在事件委派的時間存在於DOM最接近的父。使用最接近的父級限制，jQuery必須在委派前檢查範圍。

對於前：假設我們綁定一個click處理程序body標籤委派爲#trigger元素將被動態包含後

$('body').on('click', '#trigger', function() { 
    // an awesome click event 
}); 

$('body').append('<span id="trigger">Click</span>');

在上面的例子中，jQuery將單擊處理程序綁定到body標籤並在內部檢查點擊元素是否與選擇器匹配。請注意，每當您單擊正文中的任何位置時，都會執行jQuery .on，驗證是否從#trigger elemenet觸發了單擊事件並調用事件處理程序。

這就是爲什麼在綁定時找到並將事件委託給DOM中最接近的父代的原因。

就這麼說，更好的方法是將元素注入到DOM後直接綁定事件。閱讀更多關於在這裏選擇的方法：event delegation vs direct binding when adding complex elements to a page

來源

2014-10-29 15:22:13

瞭解有關相關選擇器（事件委託）方法的jQuery

回答

相關問題