在jQuery中使用.not和动态添加的类

Question

我正在使用addClass（）在点击时将.expanded添加到元素。然后，我不想再使用另一个代码块来匹配该元素。我正在使用.not（）和.on（）的组合来尝试让jQuery注意到新添加的类，但没有太多运气 - 我编写的处理程序是这样的：

    $(".person").not("expanded").on({
            mouseleave:...
    });

虽然上面我的.on（）语法显然不正确，但如何在新添加的类名中使用.not（）？

Answer 1

如果您想要直播活动，可以尝试以下方式：

$(document).on('mouseleave','.person:not(.expanded)',function(){
  ...
})

选择器'.person:not(.expanded)'将用于过滤事件。

如果您使用$('.person:not(.expanded)').on('mouseleave',function() { ...}，它此时将仅将事件处理程序附加到所选元素。如果您更改了元素的expanded类，则不会更新它。

优于document，您应该将委托附加到人员元素的容器中（出于性能原因）。请参阅on documentation。

Answer 2

您错过了.选择器上的not()：

$(".person").not(".expanded").on('mouseleave', function() {
    // code...
});

Answer 3

嗯，技术上，当添加元素或删除类名时，jQuery不会注意。

事件委托以这种方式工作：将事件处理程序绑定到父级（如果需要，最多为文档）。 .on()将使用selector参数有选择地执行事件处理程序到“selector”参数（如果提供）。

$("#someparent").on('mouseleave', '.person:not(.expanded)', function() {
    ...
});

事件“mouseleave”将冒泡到元素#someparent和事件的目标（基本上触发事件的元素将在提供的选择器.person:not(.expanded)上进行检查。如果是匹配，执行事件处理程序。

请注意，您可以委派给文档，但最好尽可能接近事件目标。

Answer 4

您还可以从所需元素中删除事件处理程序：

$("#removeHandlerFromMe").unbind('mouseleave')