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并且依赖于event bubbling，因此它必须检查选择器以查看它是否来自应该执行处理程序的元素。

Answer 2

在数字2中，单击功能将应用于此时所有已启用的按钮。因此，如果在调用该函数时未启用按钮，则永远不会启用该按钮。

在数字1中，在需要时应用click函数 - 也就是说，如果对DOM进行了更改，则再次检查该元素以查看是否需要应用click函数。

.click（...）和.live（'click'，...）有什么区别？

2 个答案: