.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()被称为只有当单击0按钮。

但是，如果我将(1)替换为(2)，则log()也会在不单击enabled按钮时被调用。
这是为什么？
(1)和(2)有什么区别？

Answer 1

区别在于.click()将click处理程序绑定到元素。这是最重要的事情，的元素，所以无论元素的$('#button.enabled')选择在它必将，坐上开往时间相匹配...无论它选择不再匹配时。

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

Answer 2

在数字2中，点击功能适用于当时所有启用的按钮。所以如果一个按钮在调用函数时没有被启用，它将永远不会被启用。

在数字1中，点击函数在需要时应用 - 也就是说，如果DOM发生变化，元素将被再次检查以查看是否需要对其应用点击函数。