Question

编辑：添加了一个小提琴来演示它：http://jsfiddle.net/Myw4H/

假设我有以下HTML标记：

<div class="bigicon icon">
  <img id="newItems" alt="New items" src="Resources/Icons/MailNewItemMenu.png" />
  <div class="iconlegend">
    New<br />Items
  <i class="fa fa-caret-down"></i>
</div>

现在，我想点击它时执行一个动作。这可以通过以下javascript完成：

$(".icon").click(function(e) {
    // When the icon holds a menu, show the menu.
    if ($(this).children(".menu").length > 0) {
        e.stopPropagation();
        $(".menu", this).first().EnableMenu(100, $(this));
     }
});

这一切都正常，但现在让我们更改HTML以禁用图标：

<div class="bigicon icon disabled">
  <img id="newItems" alt="New items" src="Resources/Icons/MailNewItemMenu.png" />
  <div class="iconlegend">
    New<br />Items
  <i class="fa fa-caret-down"></i>
</div>

注意：请参阅＆＃39;禁用＆＃39;外部div上的课程。

现在，我将事件更改为，我认为，仅适用于未禁用的图标：

$(".icon:not(.disabled)").click(function(e) {
    // When the icon holds a menu, show the menu.
    if ($(this).children(".menu").length > 0) {
        e.stopPropagation();
        $(".menu", this).first().EnableMenu(100, $(this));
     }
});

但是，当图标被禁用并点击它时，事件仍然会被触发。

注意：有关信息，我在运行时添加了禁用的类（通过javascript函数）。

有人可以解释为什么会发生这种情况以及如何解决这个问题？

Answer 1

如果在单击处理程序代码运行后添加了禁用的类，则会触发单击。

您可以在做任何事情之前检查课程。添加禁用时无关紧要，您可以在点击处理程序中检查它，以确保在禁用类存在时不会运行

$(".icon").click(function(e) {
    if(!$(this).hasClass('disabled')) {
    //  ....    
    }
});

更新

是的，您可以将事件委托给容器或文档

$(document).on('click','.icon:not(.disabled)', function(e) {
    alert("Hello");
});

我正在使用该文件，因为我不知道你有什么其他容器。

http://jsfiddle.net/Myw4H/7/

Answer 2

尝试使用.not（）代替：not（）。除了将复杂的选择器或变量推送到：not（）选择器过滤器之外，.not（）方法最终会为您提供更多可读选择。在大多数情况下，这是一个更好的选择。

jQuery - 试图理解事件

2 个答案: