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. 事件绑定(bind)器在绑定(bind)点击事件时仅查看初始状态，并且无法识别稍后添加的新类
2. 我的过滤器 ['... :not(.ui-state-disabled)] 不正确

有什么观察吗？

Answer 1

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

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

或者，当 click 时检查类(class)处理程序触发，如下所示:

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

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