事件分配VS .live（）

很久以前，我曾經使用此解決方案：事件分配VS .live（）

$('<div class="ok" />') 
.appendTo('body'); 

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

現在我用這一個：

$('<div class="ok" />') 
.appendTo('body') 
.click(function(){ alert(); })

是如何表現的差異？我相信第二種解決方案更好，因爲它不需要live（）。它總是這樣（還有很多元素）嗎？爲什麼？

來源

2012-12-02 user1392191

你也知道'.live（）'已被棄用，對吧？ – Daedalus

是的，我知道。我們可以假設使用.on（） – user1392191

@ user1392191：如果提供的任何響應已將您的問號中的一個回答爲接受。但是，如果您仍然遇到此問題，請告訴我們。 – Nope

是如何表現的差異？

那麼，你什麼時候使用live。 live總是與document綁定，並且防止事件冒泡起來也是不可能的，因爲在事件已經冒泡完畢之後觸發事件。

從這個意義上說，live()不是很友善。

您的第二個代碼示例在創建時直接綁定到對象，與live()相比，使其執行更好，更靈活。您現在可以事件防止事件冒泡等等。

將創建時的事件直接綁定到元素上，與使用on()相比，指定要綁定的最接近的靜態元素只有非常小的性能優勢。

// Performs slightly better than on() but cannot be executed from anywhere unless the element is added at the same time. 
$('<div class="ok" />').appendTo('body').click(function(){ alert(); })

的好處是雖然比具有能夠在例如一個常用方法是添加的元素之前綁定你的事件處理程序的益處小。

下面的內容與第二個代碼示例相同，但可以在普通方法內很好地執行，並且不必是添加動態元素的一部分。

// Can be called in a common init method for example and still work. 
$(body).on('click', '.ok', function(){ alert();})

on()有，您可以從事件的結合分隔元素的添加大有裨益。

來源

2012-12-02 00:53:00 Nope

第二種方法提供的可能性微乎其微（假設您沒有大量的div.ok元素掉入DOM），因爲DOM不需要再次搜索。另一種選擇是使用html/props簽名：

$("<div>", { 
    'class': "ok", 
    'click': function() { 
     alert("You clicked the new element!"); 
    } 
}).appendTo("body");

演示：http://jsfiddle.net/w4Tj3/

記住.live()已被棄用。如果您要使用活動委派，最好從現在開始使用.on()。然而，就你而言，你並不一定需要。取而代之的是，以模仿.live()你建立一個監聽器上document：

$(document).on("click", ".ok", function() { 
    alert("You clicked an .ok element!"); 
});

這種工作方式是通過利用事件冒泡行爲。當你點擊一個元素時，點擊遍歷DOM直到它最終到達document對象。然後jQuery檢查發起點擊的元素是否與我們的選擇器（.ok）相匹配，並且它是否會運行匿名函數。

爲了獲得更好的性能，請不要綁定到document，而要綁定到更接近動態添加元素的位置。例如，如果您動態添加li元素，請綁定到其父項ol或ul。這樣，事件在處理之前不需要傳播太多。

有了事件委託，你可以從動態添加div本身刪除click邏輯：

$("<div>", {'class': 'ok'}).appendTo("body");

來源

2012-12-02 00:52:38 Sampson

事件分配VS .live（）

回答

相關問題