0

なぜこのコードが何をするのか説明してください。

私が達成したいのは、最初のボタンがクリックされたときにjavascriptが無効なクラスを2番目のボタンに追加し、2番目のボタンが無効なクラスで押されたときに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>

コンソールを見ると、そうではありません。2番目のボタンは無効なクラスを取得しますが。: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 に答える