Jquery Onclickが2回目に発生しない

なぜこれが機能していないのか混乱しています。私はクラスを追加しているので、それがコレクションに追加されていないので、私は確信していません。Jquery Onclickが2回目に発生しない

コードは以下のとおりですが、こちらはjsbin http://jsbin.com/ayijeです。

どちらの方法でも、1つの要素に対して1回だけアクションが発生することがあります。

<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script> 
     <script type="text/javascript" charset="utf-8"> 
     $(document).ready(function() { 
      $('.optional').click(function() { 
       $(this).removeClass('optional').addClass('selected'); 
       return false; 
      }); 
      $('.selected').click(function() { 
       $(this).removeClass('selected').addClass('rejected'); 
       return false; 
      }); 
      $('.rejected').click(function() { 
       $(this).removeClass('rejected').addClass('optional'); 
       return false; 
      }); 
     }); 
     </script> 
    </head> 
    <body> 
     <style> 
      a {padding:2px;color:white;} 
      .optional {background-color:blue;} 
      .selected {background-color:green;} 
      .rejected {background-color:red;} 
     </style> 


     <div id="tagContainer"> 
     <a href="#" class="rejected">a</a> 
     <a href="#" class="optional"">b</a> 
     <a href="#" class="selected">c</a> 
    </div> 
    </body> 
</html>

出典

2009-09-01 Phill Price

クリックハンドラは、ドキュメントの読み込み時に一致する要素にのみ適用されるためです。別のクラスを使用してすべてのリンクを識別し、リンクが持つクラスを調べて適切なクラス変換を行う単一のクリックハンドラを設定する必要があります。あなたはすでにこれかについて知っていれば....

$(document).ready(function() { 
     $('.optional').live('click',function() { 
      $(this).removeClass('optional').addClass('selected');    return false; 
     }); 
     $('.selected').live('click',function() { 
      $(this).removeClass('selected').addClass('rejected');    return false; 
     }); 
     $('.rejected').live('click',function() { 
      $(this).removeClass('rejected').addClass('optional'); 
     }); 
    });

出典

2009-09-01 15:10:08 tvanfosson

のようにコードを変更することができますありがとうございました。私はそれがほんの少しシンプルだろうと思っていたが、あなたはそれを得た - ありがとう！ –

ガーには2つの方法があります。これまたはライブ - 選択するもの：S –

要素を追加/削除する場合はライブが適用されます。要素自体（クラスではない）が静的なままであれば、ライブハンドラを適用する必要はありません。追加の制限があります。コードをいくらか簡略化するかもしれませんが、伝播を止める能力を失うことになります。ドキュメントの制限を参照してください：http://docs.jquery.com/Events/live#typefn – tvanfosson

また、ライブクリックハンドラーにあなたのクリックハンドラを変更することができます。そうすれば、あなたはこのようなことをすることができます。

$('.optional').live('click', function() { 
       $(this).removeClass('optional').addClass('selected'); 
       return false; 
      });

そして、あなたはクラスは、ドキュメントのロード時に存在しない心配する必要はありません。要素のクラスが変更されると、自動的にバインドされます。

出典

2009-09-01 15:16:52 Contra

ガーには2つの方法があります - どちらを選択するか：S –

わからない.live()機能にjQueryのドキュメントを参照してください：

$(document).ready(function() { 
    $('.clickable').click(function() { 
     var $this = $(this); 
     if ($this.hasClass('optional')) { 
      $this.removeClass('optional').addClass('selected'); 
     } 
     else if ($this.hasClass('selected')) { 
      $this.removeClass('selected').addClass('rejected'); 
     } 
     else if ($this.hasClass('rejected')) { 
      $this.removeClass('rejected').addClass('optional'); 
     } 
     return false; 
    }); 
}); 


<div id="tagContainer"> 
    <a href="#" class="clickable rejected">a</a> 
    <a href="#" class="clickable optional">b</a> 
    <a href="#" class="clickable selected">c</a> 
</div>

出典

2009-09-01 15:17:21 Anthony

ああこれも面白そうです！ –

あなたはこの

$(document).on("click", ".clickable", function(){ 
     var $this = $(this); 
     if ($this.hasClass('optional')) { 
      $this.removeClass('optional').addClass('selected'); 
     } 
     else if ($this.hasClass('selected')) { 
      $this.removeClass('selected').addClass('rejected'); 
     } 
     else if ($this.hasClass('rejected')) { 
      $this.removeClass('rejected').addClass('optional'); 
     } 
     return false;  
});

出典

2014-06-13 11:03:38

Jquery Onclickが2回目に発生しない

答えて

関連する問題