jQuery選擇器未注冊添加的類

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>

從控制台看情況並非如此。 即使第二個按鈕獲得了禁用的類。 盡管：not（.disabled）選擇器，按禁用按鈕仍然運行javascript。

當我像這樣更改它時，它的行為符合預期

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

但是有人可以解釋為什么會這樣嗎？

Answer 1

選擇器不會在每次觸發事件時動態地重新評估自己。

解決此問題的最佳方法是使用事件委托：

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

jQuery選擇器未注冊添加的類

問題描述

1 個解決方案

解決方案1
3 已采納 2012-10-19 13:11:50

jQuery選擇器未注冊添加的類

問題描述

1 個解決方案

解決方案1 3 已采納 2012-10-19 13:11:50

解決方案1
3 已采納 2012-10-19 13:11:50