性能：jquery.live（）與按需創建特定的偵聽器？

Question

我有一個包含新聞條目標題的頁面，單擊每個ajax會加載包括新聞縮略圖的完整新聞條目。 我想在縮略圖上附加一個燈箱以顯示更大的照片。

我有兩種選擇（我認為）：

1. 。生活（）

。

$('img .thumb').live('click', function())

2. 在新聞項的回調上添加基於特定ID的偵聽器，單擊

。

$('div.news_item').click(function(){
    var id = $(this).attr('id');
    //click
    show_news_item(),
    //callback
    function(){$(id+' .thumb').lightbox();}
})

Answer 1

在.live()您有1個偵聽器，而不是n事件偵聽器，因此只要有以下條件，通常就可以獲勝：

1. 大量元素或動態創建/加載的元素
2. 嵌套在DOM中不是太深，或者是，但是您有很多元素（此處的成本/收益比）

在您的情況下，我將使用.live() ，如下所示：

$('div.news_item').live('click', function(){ });

或者，如果您的class="news_item"元素位於容器中，則可以這樣選擇：

<div id="newsItems">
  <div class="news_item">News 1</div>
  <div class="news_item">News 2</div>
</div>

您可以像這樣使用.delegate() （即使效率更高，事件更少，也可以使DOM冒泡）：

$("#newsIems").delegate(".news_item", "click", function() { });

注意：函數中的代碼仍然相同，但是$(this)仍然使用這些選項之一指向相同的元素。