Javascript .click（…）和.live（'；click'；，…）之间有什么区别？

考虑一下：

HTML:

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');
}

$（函数（）{
$（'#button.enabled'）.live（'click'，function（）{//（1）
//$（'#button.enabled'）。单击（function（）{//（2）
日志（“#button.enabled clicked”）；
});
});
函数日志（str）{
$（'#log'）。追加（str+'
'）；
$（“#按钮”）.toggleClass（'enabled'）；
}

此代码按预期工作，即仅当单击

已启用

按钮时才会调用

log（）

但是，如果我将

（1）

替换为

（2）

，则单击未启用

的
按钮时也会调用
log（）
。
这是为什么？
（1）
和
（2）之间有什么区别
？
不同之处在于将
单击处理程序绑定到元素。这是最重要的，绑定到元素，因此无论元素是什么，
$（“#按钮.enabled”）
选择器在绑定时匹配，绑定……不管它是什么，选择器以后不再匹配

在事件发生时检查选择器，看它是否应该运行处理程序…因此更改类很重要，因为它不再匹配。处理程序依赖于
文档，因此它必须检查选择器，看它是否来自它应该执行处理程序的元素。
在第2个单击函数中此时，on应用于所有已启用的按钮。因此，如果在调用函数时按钮未启用，则永远不会启用

在第一种情况下，单击功能会在需要时应用——也就是说，如果DOM发生了更改，那么会再次检查该元素，以确定是否需要对其应用单击功能。
非常感谢Nick！你是最棒的！！@Misha-welcome:）希望这能清楚地说明这一点，对于许多jQuery用户来说，这无疑是一个困惑点。
#button {
    width: 65px;
    height: 25px;
    background-color: #555;
    color: red;
    padding: 10px 20px;
}
#button.enabled {
    color: #333;
}
#button.enabled:hover {
    color: #FFF;
    cursor: pointer;
}

$(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');
}