What is the difference between .click(...) and .live('click', ...) ?

Question

Consider the 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');
}

This code works as expected, i.e. log() is called only when enabled button is clicked.

But, if I replace (1) with (2), log() is called also when not enabled button is clicked.
Why is that ?
What is the difference between (1) and (2) ?

Answer 1

The difference is that .click() binds a click handler to the element. That's the most important thing, to the element, so whatever elements the $('#button.enabled') selector matches at the time it's bound, get bound...regardless of it the selector no longer matches later.

.live() checks the selector at the time of the event to see if it should run the handler...so changing the class does matter, since it no longer matches. The .live() handler lives on document and relies on event bubbling, so it must check the selector to see if it came from an element that it should execute the handler for.

Answer 2

In number 2 the click function is applied to all enabled buttons at that moment. So if a button is not enabled when the function is called it will never be enabled.

In number 1 the click function is applied when-ever needed -- that is if there is a change to the DOM that element is checked again to see if it need to have the click function applied to it.