Jquery event for changing an element's class attribute

Question

I need to execute a JQuery code when an element's class attribute is changed. For example, initially the element will be : <div class="my-class">. So, when a new class is added to this div, (i.e. <div class="my-class new-class">, I have to trigger a JQuery code.

How do I do this in JQuery? Is there event for attribute change?

Answer 1

Cant' you just bind the functionality to the function that changes the class?

Answer 2

There is no cross browser node changed event.

One option could be to use the LiveQuery plugin. It will scan the dom periodically looking for changes and will raise an event if it encounters a change.

Answer 3

If you have absolutely no means of telling when the external function changes the class (like, a custom event, for example), you will have to do something like this:

$(document).ready(function(){

    // Cache the required element
    window.elementInQuestion = $('#element-that-changes-class');

    function checkClass(){
        if (window.elementInQuestion.hasClass('new-class')) {
            // Trigger a custom event
            $(document).trigger('elementHasClass');

            // If you need the check only until the first time the class appears
            // you can cancel further checks here
            clearInterval(window.classCheckerInterval);
        }
    }

    // Check if an element has class every once in a while
    window.classCheckerInterval = setInterval(checkClass, 100);

    $(document).bind('elementHasClass', function(){
        // Your handler here
    });
});