".click(...)"和".live('click', ...)"之间有什么区别？这是一个关于IT技术的问题。

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()。

但是，如果我用(2)替换(1)，则log()也会在未单击“启用”按钮时调用。
为什么会这样？
(1)和(2)之间有什么区别？

- Misha Moroshko

Answer 1

不同之处在于.click()将一个click处理程序绑定到元素。这是最重要的事情，对于元素来说，所以无论$('#button.enabled')选择器匹配哪些元素在绑定时，都会被绑定...无论选择器以后是否再次匹配。

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

- Nick Craver

---

@Misha - 欢迎 :) 希望这清楚地解决了问题，对于许多jQuery用户来说，这绝对是一个困惑的点。 - Nick Craver

Answer 2

在第二种情况下，单击功能应用于此时所有已启用的按钮。因此，如果在调用函数时未启用按钮，则永远不会启用它。

在第一种情况下，单击功能在需要时应用 - 也就是说，如果对DOM进行更改，则会再次检查该元素以查看是否需要将单击功能应用于它。

- Hogan