Question

Let’s suppose I have a css class named “foo”.

I would like to have two event handlers:
– the first event handler would be triggered when “foo” is added as a class to any tag
– the second event handler would be triggered when “foo” is removed as a class from any tag

How can I achieve this?

Thank you in advance.

Answer 1

There is no cross-browser event to do that.

If the class is always added/removed by your code, just write a wrapper function to do it and then use that rather than .addClass / .removeClass.

Alternately (and I’m not actively suggesting this), you could wrap .addClass and .removeClass:

var realAddClass = jQuery.fn.addClass;
jQuery.fn.addClass = function() {
    // Fire some event here
    return realAddClass.apply(this, arguments);
};

…but that’s really intrusive.

Both of those last suggestions do, of course, assume that the only way the class is added/removed is via jQuery.