Событие щелчка 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. Привязка события просматривает только начальное состояние при привязке события click и не распознает, что новый класс был добавлен позже
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 правильный по причине, селектор находит элементы, которые соответствуют в то время и привязывает к ним обработчик щелчка ... не имеет значения, какие классы или идентификаторы у них есть позже, обработчик привязан к элементу. .live() прослушивает пузыри и проверяет, соответствует ли селектор , когда событие происходит , так что оно работает ... или вы проверяете себя внутри обработчика click, как у меня во втором варианте выше.