Блог

Я использую jquery и создаю обработчики событий, подобные этому:

 $('#some_selector a.add').live('click', function(){...});
  

Однако мне не нужно выполнять обработчики, когда элемент имеет disabled класс. Затем я написал следующее, чтобы добиться этого:

 $('#some_selector a.add:not(.disabled)').live('click', function(){...});
  

Но я устал следить за всеми местами, которые мне нужно добавить :not(.disabled) , иногда я забываю добавить это и так далее. Более того, если у меня есть элемент привязки, и мой обработчик предотвращает действие по умолчанию над ним, добавление :not(.disabled) приведет к тому, что браузер откроет следующую страницу вместо того, чтобы ничего не делать.

Итак, есть ли способ настроить автоматическое отключение при выполнении обработчика, когда элемент удовлетворяет некоторому условию (например, наличие «отключенного» класса)?

Вот что вы можете сделать:

Во-первых, привяжите обработчик событий к .disabled элементам, который предотвращает выполнение других обработчиков и предотвращает действие по умолчанию:

 $('#some_selector a.add.disabled').live('click', function(event){
    event.stopImmediatePropagation();
    event.preventDefault();
});
  

Затем вы можете связать свои другие обработчики событий, как вы делали раньше. Поскольку обработчики событий выполняются в том порядке, в котором они были привязаны, обработчик событий для disabled элементов всегда будет выполняться первым и препятствовать выполнению других обработчиков (через stopImmediatePropagation ^[docs] ).

ДЕМОНСТРАЦИЯ

Вы могли бы использовать <button> вместо <a> для этого. A <button> с установленным disabled атрибутом вообще не будет реагировать на клики:

Отключенный элемент управления формой должен предотвращать click отправку в элемент любых событий, которые находятся в очереди в источнике задачи взаимодействия с пользователем.

Например: http://jsfiddle.net/ambiguous/sCv8n /

Вы также можете стилизовать a <button> так, чтобы он выглядел практически так, как вы хотите.