.click（...）和.live（'click'，...）之間有什麼區別？

Question

考慮following code：

HTML：

<div id='button' class='enabled'>Press here</div> 
<div id='log'></div> 

CSS：

#button { 
    width: 65px; 
    height: 25px; 
    background-color: #555; 
    color: red; 
    padding: 10px 20px; 
} 
#button.enabled { 
    color: #333; 
} 
#button.enabled:hover { 
    color: #FFF; 
    cursor: pointer; 
} 

的JavaScript：

$(function() { 
    $('#button.enabled').live('click', function() { // (1) 
    //$('#button.enabled').click(function() {   // (2) 
     log('#button.enabled clicked'); 
    }); 
}); 
function log(str) { 
    $('#log').append(str + '<br />'); 
    $('#button').toggleClass('enabled'); 
} 

此代碼正常工作，即log()被稱爲只有當單擊0按鈕。

但是，如果我將(1)替換爲(2)，則log()也會在不單擊enabled按鈕時被調用。
這是爲什麼？
(1)和(2)有什麼區別？

Answer 1

區別在於.click()將click處理程序綁定到元素。這是最重要的事情，的元素，所以無論元素的$('#button.enabled')選擇在它必將，坐上開往時間相匹配...無論它選擇不再匹配時。

.live()檢查選擇在事件的時間，看它是否應該運行的處理器...所以改變類確實的事情，因爲它不再匹配。 .live()處理程序位於document上並依賴於event bubbling，因此它必須檢查選擇器以查看它是否來自它應該執行處理程序的元素。

Answer 2

在數字2中，點擊功能適用於當時所有啓用的按鈕。所以如果一個按鈕在調用函數時沒有被啓用，它將永遠不會被啓用。

在數字1中，點擊函數在需要時應用 - 也就是說，如果DOM發生變化，元素將被再次檢查以查看是否需要對其應用點擊函數。