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) ?

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) ?

• javascript
• jquery

Share Improve this question Follow edited Sep 6, 2010 at 13:38 Nick Craver 631k138138 gold badges1.3k1.3k silver badges1.2k1.2k bronze badges asked Sep 6, 2010 at 12:00 Misha MoroshkoMisha Moroshko 171k230230 gold badges520520 silver badges760760 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 14

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.

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.