jQuery单击事件仍在过滤元素上触发

Question

我正在尝试根据按钮事件是否分配有 CSS 类来过滤它们。

假设我有一个这样的按钮：

<button id="save-button" class="ui-state-default ui-corner-all">Save</button>

我想让 jQuery 选择当前不具有“ui-state-disabled”类的所有按钮。我使用的选择器如下所示：

$('#save-button:not(.ui-state-disabled)').click(function() {
   ...
});

当按钮被点击时，我会调用一个不同的函数，做一些事情，然后将类'ui-state-disabled'添加到按钮。但是按钮仍然继续接受点击事件。

我猜这是因为两个可能的原因：

1. 事件绑定器在绑定点击事件时只查看初始状态，并不能识别以后添加了新类
2. 我的过滤器 ['... :not(.ui-state-disabled)] 不正确

有什么意见吗？

Answer 1

你可以使用.live()做你想做的事，像这样：

$('#save-button:not(.ui-state-disabled)').live('click', function() {
   ...
});

或者，在click 处理程序触发时检查类，如下所示：

$('#save-button').click(function() {
  if($(this).hasClass('ui-state-disabled')) return;
  ...
});

您的 #1 是正确的原因，选择器会找到匹配的元素 当时 并将点击处理程序绑定到它们......不管他们以后有什么类或 ID ，处理程序绑定到元素。 .live() 监听气泡并检查选择器是否匹配事件发生时，所以它可以工作......或者你在click 处理程序中检查自己，就像我在上面的第二个选项中一样。