Привет. Сегодня разберемся как получить событие изменения класса элемента на jQuery.

Представьте себе ситуацию: какой-то посторонний скрипт изменяет класс элемента (например, добавляет class=fixed для header, чтобы сделать его фиксированным). При этом внести изменения в этот посторонний скрипт нет возможности, но очень нужно отследить добавление этого класса элементу, чтобы изменить другие элементы (и не придумывать велосепед с алгоритмом «когда этот класс добавляется»).

Тут и приходит на ум, что не плохо было бы иметь событие (event), который будет вызываться (trigger) тогда, когда класс элемента изменён. К сожалению jQuery само по себе такого события не имеет, но можно подвесить своё событие.

Как мы это будем делать? Событие изменения класса элемента на jQuery

Предположим, что изенение класса происходит на jQuery при помощи функций addClass и removeClass, в таком случае мы просто переопределим эти функции, и допишем в них триггер события, к которому потом можно будет навязать любое действие (аналогично другим событиям на jQuery).

Если же класс изменяется вручную (например через attr(‘className’, ‘new class’)), то в этом случае нужно будет также вручную отслеживать «изменился ли класс», например на setInterval, но мы этим заниматься не будем, и предположим, что все изменения класса происходят по addClass/removeClass.

Готово. Теперь в любой момент, когда вам нужно будет отследить изменение класса элемента, вы сможете добавить такое событие к любому элементу, и выполнить функцию, когда класс добавляется или удаляется.

Пример использования


Download