性能：jquery.live（）与按需创建特定的侦听器？

Question

我有一个包含新闻项目标题的页面，点击每一个ajax加载一个完整的新闻项目，包括照片缩略图。我想在缩略图上附上一个灯箱，以显示更大的照片。

我有两个选择（我认为）：

1. .live（）

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

1. 在新闻项目的回调上添加特定的基于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)仍指向具有这些选项的相同元素。