可能なjQueryのバグ - イベントがまだ変更クラス要素

Question

に解雇された私は、このコードではjQueryを使って昨日の潜在的なバグを発見：

$(document).ready(function() { 

    $('.likedLink').click(function(){ 
     return false; 
    }); 


    $('.likes').click(function(){ 

     var id = $(this).attr('id'); 
     var currentLike = id; 
     id = id.replace('p',''); 


     $.ajax({ 
      type: "POST", 
      url: "/posts/like", 
      data: "id=" + id, 
      success: function(like){ 
       $('#' + currentLike).html(like).removeClass('likes').addClass('likedLink'); 
      } 
     }); 


     return false; 

    }); 

}); 

をポストバックナンバーを受信して​​、現在のクリックしたリンクのHTMLを設定し、新しい値私はそれから、さらにクリックすることを避けるために、要素のクラスを変更します/ AJAX-ing。

コードが機能し、新しいHTMLを受け取り、クラスを正しく変更しましたが、ユーザー/私がクリックしたときにAJAXイベントがまだ起動されましたが、別のクラスだったので解雇してはいけませんでした。

これはjQueryのバグですか？ （ちなみに

は、私は.replaceWith("<p>" + like + "</p>")に.html()を変更することで、コードを固定しますが、私は、これはあなたがライブ（使用する必要が

Answer 1

これはバグではありません！

セレクタは作成時にのみ評価されます。後でクラス名を変更しても、イベントはバインド解除されません。

あなたはそれをアンバインドする必要があります：

$.ajax({ 
    type: "POST", 
    url: "/posts/like", 
    data: "id=" + id, 
    success: function(like){ 
     $('#' + currentLike).html(like).unbind('click'); 
    } 
}); 

も、クラス名を変更する必要はありませんが。

Answer 2

が起こったか非常に興味があった）、または代理人）の代わりにクリックします（）。 click（）関数はイベントを一度割り当て、変更されたかどうかをチェックしません。

Answer 3

click（ショートカットはbind("click", handler);）を使用すると、ハンドラが要素自体に接続されるため、クラスまたは親の変更はハンドラに影響しません。要素がまだそのクラスを持っている場合にのみ、そのコールバックを実行する$(".likes").live("click, handler);を試すことができます