0

谁能解释一下为什么这段代码会做它的工作。

我想要实现的是，当第一个按钮被点击时，javascript 会向第二个按钮添加一个禁用类，当第二个按钮被禁用类按下时，javascript 将不会运行。

<!DOCTYPE html>  
<html lang="en">  
<head>
<meta charset="utf-8" />  
<title>jQuery question</title>  
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<style>
a.success { background: green }
</style>
</head>  
<body>
    <div id="holder">
        <a href="#" class="button">Button 1</a>
        <a href="#" class="button">Button 2</a>
    </div>
</body>
<script>
$(function(){

  $('#holder a.button:not(.disabled)').on('click', function() {

    // Toggle success class
    if($(this).hasClass('success')) {
        $(this).removeClass('success');
    }
    else {
        $(this).addClass('success');
    }

    // Add disabled class to the not so lucky button 
    $('#holder a.button:not(.success)').each(function() {
        $(this).addClass('disabled');
    });

  });

});
</script>
</html>

查看控制台并非如此。即使第二个按钮获得禁用类。尽管有 :not(.disabled) 选择器，但按下禁用按钮仍会运行 javascript。

当我像这样更改它时，它的行为符合预期

$('#holder a.button').on('click', function() {
    if($(this).hasClass('disabled')) {
      return false;
    }

但是有人可以解释为什么它会这样吗？

4

1 回答 1

3

每次触发事件时，选择器不会动态地重新评估自身。

解决此问题的最佳方法是使用事件委托：

$('#holder').on('click', '.button:not(.disabled)', function() {
    // snip...
});
于 2012-10-19T13:11:50.163 回答