idセレクタのjQueryイベントハンドラをクラスセレクタでオーバーライドするにはどうすればよいですか？

Question

私はidとクラスセレクタと、いくつかの要素のためのイベントハンドラをクリックしています

$(function() { 
    $("#cancelOrderLink").click(function() { 
     if (confirm("If you continue, all items will be removed " + 
      "from your cart. This action cannot be undone. Continue " + 
      "and empty cart?")) 
      $("form#clearCartForm").submit(); 
    }); 

    $(".updateItemLink").click(function(){ 
     $(this).closest("form").submit(); 
    }) 
}); 

はしかし、私は、要素が特定のクラス名を持っている場合にトリガされることから、これらのハンドラを防ぐためのロジックを追加したい：

$(function() { 
    $(".superUser").click(function() { 
     $("#message").html("This action is not allowed when acting as a Super User.<br />"); 

     return false; 
    }); 
}); 

最初のスニペットのハンドラを2番目のスニペットで上書きするにはどうすればよいですか？

Answer 1

あなたのコードにevent.stopPropagation();を追加します。

また

$(".superUser").click(function(e) { 
    e.stopPropagation(); 
    ... 

、要素が等しい、とあなたが他のclickのリスナーを持っていない場合は、以前の方法でアンバインド：あなたの場合は

$(".superUser").unbind('click').click(function() { 

を特定のIDの実行時にイベントをバインドする必要はなく、クラス名は、使用：

$("#cancelOrderLink").not('.superuser').click(function() { 

Answer 2

.not()フィルタを使用できます。

$(function() { 
    $("#cancelOrderLink").not(".superUser").click(function() { 
     if (confirm("If you continue, all items will be removed " + 
      "from your cart. This action cannot be undone. Continue " + 
      "and empty cart?")) 
      $("form#clearCartForm").submit(); 
    }); 
}); 

Answer 3

e.stopPropagation（）ではなく、 "return false"を使用することをお勧めします。伝播を止めてデフォルトを防ぐより簡単な方法です。 例：

$("#yourclass").click(function(){ 
return flase; 
});