Class name change Event in jQuery

Question

Is there a way to trigger a event in jQuery when an elements classes are changed?

Examples:

<img class="selected" />

into

<img class="selected newclass" />

triggers an event

---

And

<img class="selected" />

into

<img class="" />

trigger an event

Answer 1

You might be able to workaround on a little hacky way. Hook .addClass() & .removeClass() like so:

var _addClass    = $.fn.addClass,
    _removeClass = $.fn.removeClass;

$.fn.addClass    = function(){
    // do whatever here
    return _addClass.apply(this, arguments);
}

$.fn.removeClass = function(){
    // do whatever here
    return _removeClass.apply(this, arguments);
}

That way, assuming you are just interested in watching elements class changes with jQuery, you can trigger whatever code on adding or removing classes. Again, just if you are using jQuery, for this example.

Of course, you can hook and overwrite any javascript function that way.

As Nick Craver mentioned in a comment, there are several other jQuery methods which can add or remove an elements class. You would have to hook all of those, namely:

.addClass()
.removeClass()
.toggleClass()
.removeAttr('class')
.attr('class', 'changed')

unless you know exactly which methods are called to manipulate a class, you would have to care about all of those.