使用生活（） - 好處 - 類似於綁定（）

Question

我一直在做一些閱讀jquery現場活動，我仍然有點困惑？使用它有什麼好處？

http://docs.jquery.com/Events/live

我知道它是類似綁定但兩者這些事件似乎仍然過我。

只是尋找一些指針。

Answer 1

警告：這個答案太舊了。 仍然非常有用，但live已被棄用，並在較新版本的jQuery中刪除。因此，請閱讀答案，因爲用例沒有改變，您將瞭解爲什麼以及何時使用較少的事件處理程序。但除非您仍在使用jQuery的舊版本（v1.4.2或更早版本），否則您應該考慮編寫新的等效代碼。如jQuery API for live所述，並在此處複製：

根據其後繼方案重寫.live()方法很簡單;這些都是爲所有三個事件連接方法等效調用模板：

1. $(selector).live(events, data, handler); // jQuery 1.3+
2. $(document).delegate(selector, events, data, handler); // jQuery 1.4.3+
3. $(document).on(events, selector, data, handler); // jQuery 1.7+

有時候，你有一組在頁面加載時的元素，比如說，編輯鏈接：

<table> 
    <tr> 
    <td>Item 1</td> 
    <td><a href="#" class="edit">Edit</a></td> 
    </tr> 
    <tr> 
    <td>Item 2</td> 
    <td><a href="#" class="edit">Edit</a></td> 
    </tr> 
    <tr> 
    <td>Item 3</td> 
    <td><a href="#" class="edit">Edit</a></td> 
    </tr> 
</table> 

現在，也許你有這樣的事情用jQuery：

$(document).ready(function() { 
    $('a.edit').click(function() { 
    // do something 
    return false; 
    }); 
}); 

但是，如果你添加一個新的元素，以該表動態，頁面後已初步裝？

$('table').append(' 
    <tr><td>Item 4</td><td><a href="#" class="edit">Edit</a></td></tr> 
'); 

當你點擊這個新項目上的「編輯」時，沒有任何事情會發生，因爲事件在頁面加載時被綁定。現場直播。有了它，你可以綁定事件上面是這樣的：如果你有一類edit在頁面初始加載之後添加任何新的<a>元素

$(document).ready(function() { 
    $('a.edit').live('click', function() { 
    // do something 
    return false; 
    }); 
}); 

現在，它仍然會註冊此事件處理程序。

但是，這是如何完成的？

jQuery使用所謂的事件委託來實現此功能。在這種情況下或者當你想要加載大量的處理程序時，事件委派很有幫助。假設你有圖像的DIV：

<div id="container"> 
    <img src="happy.jpg"> 
    <img src="sad.jpg"> 
    <img src="laugh.jpg"> 
    <img src="boring.jpg"> 
</div> 

但不是4張圖片，你有100或200，或1000要綁定一個click事件的圖像以進行X動作當用戶點擊在上面。正如你所期待的那樣......

$('#container img').click(function() { 
    // do something 
}); 

......然後會綁定數百個處理程序，它們都做同樣的事情！這是效率低下的，可能會導致沉重的Web應用程序性能下降。通過事件委派，即使您以後不打算再添加更多映像，對於這種情況，使用live可能會更好，因爲您可以將一個處理程序綁定到容器，並檢查它何時被點擊是一個圖像，然後執行一個動作：

// to achieve the effect without live... 
$('#container').click(function(e) { 
    if($(e.target).is('img')) { 
     performAction(e.target); 
    } 
}); 

// or, with live: 
$('img', '#container').live('click', function() { 
    performAction(this); 
}); 

由於jQuery的都知道，新的元素以後可以添加或性能是重要的，而不是結合事件的實際圖像，它可能會增加一到像第一個例子中的div（實際上，我非常確定它將它們綁定到body，但它可能與上面示例中的容器相同），然後進行委託。這個e.target屬性可以讓事後檢查被點擊/執行的事件是否與您可能指定的選擇器匹配。

要說清楚：這不僅對於不需要重新綁定事件的直接方式很有幫助，而且對於大量項目來說，它可以顯着更快。

Answer 2

基本上，與.live()如果你有一個非常動態的網站，你不必麻煩更新事件處理程序。

$('.hello').live('click', function() { 
    alert('Hello!'); 
}); 

這個例子將click事件綁定到其已經通過AJAX或舊時尚的JavaScript有的「你好」類以及被動態插入的任何元素，無論是任何元素。

Answer 3

好處是當創建這些元素時，事件處理程序也將被添加到新的匹配元素中。這使您不必每次創建需要它的新元素（匹配先前使用的選擇器）時手動添加事件處理程序。

新增jQuery的1.3：綁定一個處理 一個事件（像click）的所有 電流 - 和未來 - 匹配 元素。

從http://docs.jquery.com/Events/live#typefn，強調我的。