正確調整jQuery以支持動態內容

Question

不太確定如何解決這個問題，但是在這裏。

說，你可以在jQuery中點擊按鈕.btn當執行一個程序：

$(document).ready(function(){ 
    $(".btn").click(function(){...}); 
}); 

這個工程上存在文檔時準備好所有.btn元素。當我們需要得到這個爲工作動態加載.btn元素，我們需要通過解決這些元素首先包含動態加載的元素靜態對象，即​​：

$(".static-container") 
    .on("click", ".btn", function(){...}); 
}); 

然而，任何靜態元素將會這樣做，而不僅僅是最接近元素的元素，也就是body，或者是常用的#page-wrapper或類似的東西。

我有一組像這樣的回調，我希望包含在可能有不同體系結構的多個頁面上，所以我需要某種類型的容器出現在每個頁面上，這意味着我可以不那麼具體。

我的問題是：

有多快是它是更具體的（意思是：如何在DOM樹深得多）指定靜態容器是什麼時候？這方面的良好做法是什麼？

Answer 1

最佳做法是儘可能使用離動態內容最近的靜態父元素，即儘可能深的DOM樹。

這樣做的結果是事件有更少的元素可以通過，因此處理速度更快。實際上這是毫秒的差異，但誰不希望最快的代碼成爲可能。

另請注意，不要只將所有委派的事件處理程序放在單個根元素（如document,body或共享容器）上，因爲如果存在大量事件處理程序，這可能會導致速度變慢一個單一的元素。正是由於這個原因，live()已被棄用，並在幾年前被刪除。