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

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