.click(...)和.live('click',...)有什么区别？

Question

请考虑以下代码:

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和依赖于事件冒泡,所以它必须检查选择,看它是否来自它应该执行的处理程序的元素进来.