如何使用类选择器覆盖 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;
    });
});

如何使用第二个代码段覆盖第一个代码段中的处理程序片段？

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

我建议使用“return false”而不是 e.stopPropagation()。这是停止传播和防止违约的更万无一失的方法。
例如：

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