245

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?

3

13 Answers 13

228

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

8
  • 4
    What's the deal with triggering the event which then calls a function? Why not call the function directly, instead of triggering it?
    – RamboNo5
    Dec 23, 2009 at 1:11
  • 44
    Triggering is a mechanism that will allow certain elements to "subscribe" to an event. that way, when the event is triggered, those events can all happen at once and run their respective functionality. for instance, if i have one object that changes from red to blue and three objects waiting for it to change, when it changes, i can just trigger the changeColor event, and all those objects subscribing to that event can react accordingly.
    – Jason
    Dec 23, 2009 at 1:32
  • 1
    Seems a bit strange that the OP wants to listen to a 'cssClassChanged' event; surely the class was added as a result of some other 'application' event such as 'colourChanged' which would make more sense to announce with trigger as I can't quite imagine why anything would be interested in specifically a className change, it's more the result of the classNameChange surely? Feb 8, 2013 at 14:46
  • If it was specifically a className change that was of interest then I'd imagine decorating jQuery.fn.addClass to trigger 'cssClassChanged' would be more sensible like @micred said Feb 8, 2013 at 14:48
  • 6
    @riscarrott i don't presume to know the OP's application. I'm just presenting them with the concept of pub/sub and they can apply it however they'd like. Disputing what the actual event name should be with the amount of info given is silly.
    – Jason
    Mar 7, 2013 at 17:35
143

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
    });
});
6
  • This indeed sounds like the best approach, but although I bind the event only to "#YourExampleElementID", it appears that all class changes (i.e., on any of the elements on my page) are handled by this handler... any thoughts? Mar 8, 2013 at 13:12
  • It works fine for me @FilipeCorreia . Can you please provide a jsfiddle with replicating your case? Mar 9, 2013 at 7:19
  • @Goldentoa11 You should take time some evening or weekend and monitor everything that happens on a typical pageload which uses advertising heavily. You will be blown away by the volume of scripts attempting (sometimes unsuccessfully in the most spectacular way) to do things like this. I've run across pages which fire tens of DOMNodeInserted/DOMSubtreeModified events per second, totaling hundreds of events by the time you get to $(), when the real action starts.
    – L0j1k
    Sep 26, 2014 at 18:16
  • You would presumably also want to support triggering the same event on removeClass
    – Darius
    Apr 1, 2015 at 14:34
  • 4
    Arash, I guess I understand why @FilipeCorreia was experiencing some issues with this approach: if you bind this cssClassChanged event to an element, you must be aware that it will be fired even when its child change their class. Therefore if for example you don't want to fire this event for them, just add something like $("#YourExampleElementID *").on('cssClassChanged', function(e) { e.stopPropagation(); }); after your bind. Anyway, really nice solution, thanks!
    – tonix
    Mar 13, 2017 at 15:53
64

If you want to detect class change, best way is to use Mutation Observers, which gives you complete control over any attribute change. However you need to define listener yourself, and append it to element you are listening. Good thing is that you don't need to trigger anything manually once listener is appended.

$(function() {
(function($) {
    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

    $.fn.attrchange = function(callback) {
        if (MutationObserver) {
            var options = {
                subtree: false,
                attributes: true
            };

            var observer = new MutationObserver(function(mutations) {
                mutations.forEach(function(e) {
                    callback.call(e.target, e.attributeName);
                });
            });

            return this.each(function() {
                observer.observe(this, options);
            });

        }
    }
})(jQuery);

//Now you need to append event listener
$('body *').attrchange(function(attrName) {

    if(attrName=='class'){
            alert('class changed');
    }else if(attrName=='id'){
            alert('id changed');
    }else{
        //OTHER ATTR CHANGED
    }

});
});

In this example event listener is appended to every element, but you don't want that in most cases (save memory). Append this "attrchange" listener to element you want observe.

5
  • 1
    this seems like it is doing the exact same thing that the accepted answer is doing, but with more code, unsupported on some browsers, and with less flexibility. the only benefit this appears to have is that it will fire every time something changes on the page, which will absolutely destroy your performance...
    – Jason
    Nov 30, 2014 at 8:06
  • 10
    Your statement in answer is incorrect @Json, this is actually the way to do it if you don't want to active any trigger manually, but have it active automatically. It's not only benefit it's the benefit, cos this was asked in question. Second, this was just an example, and as it says in example it's not suggested to append event listener to every element but only to elements you want to listen, so I don't understand why will it destroy performance. And last thing, it's future, most of latest browser support it, caniuse.com/#feat=mutationobserver .Please reconsider edit, it's right way.
    – Mr Br
    Nov 30, 2014 at 10:28
  • 1
    The insertionQ library lets you catch DOM nodes showing up if they match a selector. It has wider browser support because it doesn't use DOMMutationObserver. Aug 28, 2015 at 4:07
  • This is a great solution. In particular for starting and stopping canvas or SVG animations when a class is added or removed. In my case for making sure they are not running when scrolled out of view. Sweet!
    – BBaysinger
    Aug 24, 2018 at 20:17
  • 1
    For 2019, this should be the accepted answer. All major browsers seem to support Mutation Observers now, and this solution doesn't require to fire events manually or rewrite basic jQuery functionality.
    – sp00n
    Mar 5, 2019 at 13:11
53

I would suggest you override the addClass function. You can do it this way:

// 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 );

        // call your function
        // this gets called everytime you use the addClass method
        myfunction();

        // return the original result
        return result;
    }
})();

// document ready function
$(function(){
    // do stuff
});
5
22

Just a proof of concept:

Look at the gist to see some annotations and stay up-to-date:

https://gist.github.com/yckart/c893d7db0f49b1ea4dfb

(function ($) {
  var methods = ['addClass', 'toggleClass', 'removeClass'];

  $.each(methods, function (index, method) {
    var originalMethod = $.fn[method];

    $.fn[method] = function () {
      var oldClass = this[0].className;
      var result = originalMethod.apply(this, arguments);
      var newClass = this[0].className;

      this.trigger(method, [oldClass, newClass]);

      return result;
    };
  });
}(window.jQuery || window.Zepto));

The usage is quite simple, just add a new listender on the node you want to observe and manipulate the classes as usually:

var $node = $('div')

// listen to class-manipulation
.on('addClass toggleClass removeClass', function (e, oldClass, newClass) {
  console.log('Changed from %s to %s due %s', oldClass, newClass, e.type);
})

// make some changes
.addClass('foo')
.removeClass('foo')
.toggleClass('foo');
4
  • This worked for me, except I could not read old or new class with the removeClass method. Feb 20, 2014 at 22:06
  • 1
    @slashdottir Can you create a fiddle and explain what exactly doesn't work.
    – yckart
    Sep 18, 2014 at 19:06
  • Yeah... does not work. TypeError: this[0] is undefined in «return this[0].className;» Feb 21, 2016 at 18:29
  • it works but sometimes (why ?), this[0] is undefined ... simply replace the end of the lines with var oldClass and var newClass with the following assignment: = (this[0] ? this[0].className : "");
    – fvlinden
    Sep 29, 2018 at 8:04
9

using latest jquery mutation

var $target = jQuery(".required-entry");
            var observer = new MutationObserver(function(mutations) {
                mutations.forEach(function(mutation) {
                    if (mutation.attributeName === "class") {
                        var attributeValue = jQuery(mutation.target).prop(mutation.attributeName);
                        if (attributeValue.indexOf("search-class") >= 0){
                            // do what you want
                        }
                    }
                });
            });
            observer.observe($target[0],  {
                attributes: true
            });

// any code which update div having class required-entry which is in $target like $target.addClass('search-class');

3
8

change() does not fire when a CSS class is added or removed or the definition changes. It fires in circumstances like when a select box value is selected or unselected.

I'm not sure if you mean if the CSS class definition is changed (which can be done programmatically but is tedious and not generally recommended) or if a class is added or removed to an element. There is no way to reliably capture this happening in either case.

You could of course create your own event for this but this can only be described as advisory. It won't capture code that isn't yours doing it.

Alternatively you could override/replace the addClass() (etc) methods in jQuery but this won't capture when it's done via vanilla Javascript (although I guess you could replace those methods too).

8

There is one more way without triggering an custom event

A jQuery Plug-in to monitor Html Element CSS Changes by Rick Strahl

Quoting from above

The watch plug-in works by hooking up to DOMAttrModified in FireFox, to onPropertyChanged in Internet Explorer, or by using a timer with setInterval to handle the detection of changes for other browsers. Unfortunately WebKit doesn’t support DOMAttrModified consistently at the moment so Safari and Chrome currently have to use the slower setInterval mechanism.

6

Good question. I'm using the Bootstrap Dropdown Menu, and needed to execute an event when a Bootstrap Dropdown was hidden. When the dropdown is opened, the containing div with a class name of "button-group" adds a class of "open"; and the button itself has an "aria-expanded" attribute set to true. When the dropdown is closed, that class of "open" is removed from the containing div, and aria-expanded is switched from true to false.

That led me to this question, of how to detect the class change.

With Bootstrap, there are "Dropdown Events" that can be detected. Look for "Dropdown Events" at this link. http://www.w3schools.com/bootstrap/bootstrap_ref_js_dropdown.asp

Here is a quick-and-dirty example of using this event on a Bootstrap Dropdown.

$(document).on('hidden.bs.dropdown', function(event) {
    console.log('closed');
});

Now I realize this is more specific than the general question that's being asked. But I imagine other developers trying to detect an open or closed event with a Bootstrap Dropdown will find this helpful. Like me, they may initially go down the path of simply trying to detect an element class change (which apparently isn't so simple). Thanks.

5

If you need to trigger a specific event you can override the method addClass() to fire a custom event called 'classadded'.

Here how:

(function() {
    var ev = new $.Event('classadded'),
        orig = $.fn.addClass;
    $.fn.addClass = function() {
        $(this).trigger(ev, arguments);
        return orig.apply(this, arguments);
    }
})();

$('#myElement').on('classadded', function(ev, newClasses) {
    console.log(newClasses + ' added!');
    console.log(this);
    // Do stuff
    // ...
});
5

You can bind the DOMSubtreeModified event. I add an example here:

HTML

<div id="mutable" style="width:50px;height:50px;">sjdfhksfh<div>
<div>
  <button id="changeClass">Change Class</button>
</div>

JavaScript

$(document).ready(function() {
  $('#changeClass').click(function() {
    $('#mutable').addClass("red");
  });

  $('#mutable').bind('DOMSubtreeModified', function(e) {
      alert('class changed');
  });
});

http://jsfiddle.net/hnCxK/13/

0
0

if you know a what event changed the class in the first place you may use a slight delay on the same event and the check the for the class. example

//this is not the code you control
$('input').on('blur', function(){
    $(this).addClass('error');
    $(this).before("<div class='someClass'>Warning Error</div>");
});

//this is your code
$('input').on('blur', function(){
    var el= $(this);
    setTimeout(function(){
        if ($(el).hasClass('error')){ 
            $(el).removeClass('error');
            $(el).prev('.someClass').hide();
        }
    },1000);
});

http://jsfiddle.net/GuDCp/3/

0
var timeout_check_change_class;

function check_change_class( selector )
{
    $(selector).each(function(index, el) {
        var data_old_class = $(el).attr('data-old-class');
        if (typeof data_old_class !== typeof undefined && data_old_class !== false) 
        {

            if( data_old_class != $(el).attr('class') )
            {
                $(el).trigger('change_class');
            }
        }

        $(el).attr('data-old-class', $(el).attr('class') );

    });

    clearTimeout( timeout_check_change_class );
    timeout_check_change_class = setTimeout(check_change_class, 10, selector);
}
check_change_class( '.breakpoint' );


$('.breakpoint').on('change_class', function(event) {
    console.log('haschange');
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.