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.