В чем разница между .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() вызывается только когда enabled нажата кнопка.

Но, если я заменю (1) на (2), log() вызывается также, когда не нажата кнопка enabled.
Почему?
В чем разница между (1) и (2)?

Answer 1

Разница в том, что .click() связывает обработчик click с элементом. Это самое главное, к элементу, поэтому какие бы ни элементов не селектор $('#button.enabled') соответствует в то время он связан, получить связан ... независимо от него селектора больше не соответствует позже.

.live() проверяет селектор на момент события чтобы увидеть, если он должен работать обработчик ... так что изменение класса делает вопрос, так как он больше не соответствует. Обработчик .live() живет на document и полагается на event bubbling, поэтому он должен проверить селектор, чтобы узнать, пришел ли он от элемента, для которого он должен выполнять обработчик.

Answer 2

В номере 2 функция щелчка применяется ко всем включенным кнопкам в этот момент. Поэтому, если кнопка не включена при вызове функции, она никогда не будет включена.

В номере 1 функция щелчка применяется когда когда-либо понадобится - то есть, если есть изменение в DOM, этот элемент снова проверяется, чтобы увидеть, нужно ли ему применить функцию клика.