Firing events on CSS class changes in jQuery

Question

How can I fire an event if a CSS class is added or changed using jQuery? Does changing of a CSS class fire the jQuery change() event?

Answer 1

Whenever you change a class in your script, you could use a trigger to raise your own event.

$(this).addClass('someClass'); $(mySelector).trigger('cssClassChanged') .... $(otherSelector).bind('cssClassChanged', data, function(){ do stuff }); 

but otherwise, no, there's no baked-in way to fire an event when a class changes. change() only fires after focus leaves an input whose input has been altered.

$(function() {    var button = $('.clickme')        , box = $('.box')    ;        button.on('click', function() {       box.removeClass('box');      $(document).trigger('buttonClick');    });                  $(document).on('buttonClick', function() {      box.text('Clicked!');    });  });

.box { background-color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <div class="box">Hi</div>  <button class="clickme">Click me</button>

More info on jQuery Triggers

Answer 2

IMHO the better solution is to combine two answers by @RamboNo5 and @Jason

I mean overridding addClass function and adding a custom event called cssClassChanged

// Create a closure (function(){     // Your base, I'm in it!     var originalAddClassMethod = jQuery.fn.addClass;      jQuery.fn.addClass = function(){         // Execute the original method.         var result = originalAddClassMethod.apply( this, arguments );          // trigger a custom event         jQuery(this).trigger('cssClassChanged');          // return the original result         return result;     } })();  // document ready function $(function(){     $("#YourExampleElementID").bind('cssClassChanged', function(){          //do stuff here     }); });