Question

任何人都可以解释一下为什么这段代码会做它的功能。

我想要实现的是，当点击第一个按钮时，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>

查看控制台情况并非如此。即使第二个按钮获得禁用的课程。按下禁用按钮仍然运行javascript，尽管：not（.disabled）选择器。

当我像这样改变它时，它的行为与预期一致

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

但有人可以解释一下为什么会这样吗？

Answer 1

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

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

$('#holder').on('click', '.button:not(.disabled)', function() {
    // snip...
});

jQuery选择器不会注册添加的类

1 个答案: