javascript - .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() 也会在未启用时被调用 按钮被点击。
这是为什么？
(1) 和 (2) 有什么区别？

Answer 1

区别在于.click()将 click 处理程序绑定(bind)到元素。这是最重要的事情，对元素，所以无论元素 $('#button.enabled') 选择器匹配 at它被绑定(bind)的时间，被绑定(bind)...不管它选择器以后不再匹配。

.live() 在事件发生时检查选择器以查看它是否应该运行处理程序...因此更改类确实很重要，因为它不再匹配。 .live()处理程序依赖于 document 并依赖于 event bubbling ，因此它必须检查选择器以查看它是否来自应为其执行处理程序的元素。