JQuery同じクラスの.click（）の中でtoggleClass（）を使用しても動作しないようです

Question

私がしようとしていることは、jqueryを使ってyoutube上の投票システムを親指/一度ユーザーが投票したら、両方のdiv（画像は何でも関係ありません）がその特定の投稿で利用できなくなることになります。

これまでのところ、toggleClass（）が独自のクラスを変更する内部の.click（）を使用していますが、DOMを調べるとクラスが変更されているのがわかりますが、なぜ.clickまだ新しいクラスに取り組んでいますか？そのクラスにはないので、クラスを切り替えた後、私はまだ新しいクラス - 「votedDown」をクリックすることができますなぜ私は理解していない何

//TO BE CALLED WHEN USER CLICKS VOTE FORGIVENESS 
$('.voteUp').click(function() { 
    var id = $(this).closest("article").attr("id"); 

    //Make it impossible to vote again 
    $(this).toggleClass('voteUp votedUp'); 
    $(this).parent().find('.voteDown').toggleClass('voteDown votedDown'); 

}); 

そして、私のHTML（PHP）

 <article class='yellowSheet' id='57'> 
      <div class="title"> 
       <h1>StuffUp says :</h1> 
       <p class="story">What happened ?</p> 
      </div> 

      <div class="entryContent"> 
       <p>guy, 2011-06-28 17:11:48</p> 
      </div> 

      <div class="voting"> 
       <img class="voteUp" src="images/thumbsUp.png" /></div> 
       <img class="voteDown" src="images/thumbsDown.png" /></div> 
      <div class="storyBottom"></div> 

     </article> 

です.clickメソッドがありますか？ clickハンドラが要素自体に登録されていると、それはまだクラスを公開するかどうかに呼び出されます。

は、クラス名を使用すると、要素を一致させるために使用する唯一の手段であるあなた

Answer 1

ありがとうございます。

あなたは要素がまだ初期のセレクタと一致した場合にのみ呼び出されるイベントハンドラを登録するlive()を使用することができます。

$(".voteUp").live("click", function() { 
    // Your event handler. 
}); 

Answer 2

あなたはすでにオブジェクトにクリックイベントをバインドしました。 clickイベントが来ると予想されるクラスを削除することはできません。あなたが欲しいのは、これを呼び出すことです：

$(this).unbind('click'); 

Answer 3

私は実際にvoteUpを削除し、votedUpを追加します。

$(this).removeClass('voteUp').addClass('votedUp'); 

クラスを切り替えるには、 'voteUp votedUp'ではなく 'votedUp'を切り替えてください。 'voteUp'に割り当てられたクリックイベントがある場合、トグルで 'votedUp'を追加してもそのクリックバインドは削除されません。

Answer 4

.clickは、実行時にセレクタに一致するすべてのエンティティにイベントハンドラをバインドします。そのため、クラスを削除してもエンティティにはまだクリックイベントがバインドされています。

2つのうちのいずれかを実行できます。次のいずれかを使用します

$('.voteUp').live('click', function() { 
    // etc 
}); 

「ライブ」はあなたに「クリック」期待しているように動作し、そしてあなたがそのセレクタにマッチする何かをクリックした場合にのみアクティブに - そしてそれはあなたがクリックし、このたびを分析します。

それとも、例えば、イベントハンドラ内でイベントを手動でアンバインドすることができます。この2番目の例ではまた、名前空間、イベントハンドラを使用しています

$('.voteUp').bind('click.voteUp', function(e) { 
    $(this).unbind('click.voteUp'); 
    // and the rest of what you want to do; 
}); 

、唯一のあなたの名前のイベントハンドラを意味jqueryの中に巧妙な機能は、削除されます。

Answer 5

実際には、クラスにではなく要素にバインドされます。クラス名は初期ルックアップのためだけに使用されます。あなたはそれが$(this).unbind('click');

OR

をクリックされています後だけの要素を一度クリックすることができるようになる.one()methodを使用してクリックイベントをバインド解除する.unbind()メソッドを使用したいと思うどちらかこの場合

。

$('.voteUp').one('click', function() {... 

Answer 6

ない、それはこの時点では重要、しかし、あなたは余分な「</div>」を持っている場合、私はあなたが問題をより明確にしなければならないものを再フォーマットしてください：

<div class="voting"> 
    <img class="voteUp" src="images/thumbsUp.png" /> 
</div> <!-- Extra close div --> 
    <img class="voteDown" src="images/thumbsDown.png" /> 
</div> 

だから私は考えていませんこのステートメントのfind（）は何でも一致するようになります：

$(this).parent().find('.voteDown').toggleClass('voteDown votedDown');