Listen for change of class in jquery

Question

Is there a way in jquery to listen for a change to a node's class and then take some action on it if the class changes to a specific class? Specifically, I'm using the jquery tools tabs plugin with the slideshow and as the slideshow is playing, I need to be able to detect when the focus is on a particular tab/anchor so that I can unhide a specific div.

In my specific example, I need to know when:

<li><a class="nav-video" id="nav-video-video7" href="#video7-video">Video Link 7</a></li> 

changes to the following with the class "current" added:

<li><a class="nav-video" id="nav-video-video7 current" href="#video7-video">Video Link 7</a></li> 

Then I want to unhide a div at that moment.

Thanks!

Answer 1

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

$(document).ready(function() {    $('#changeClass').click(function() {      $('#mutable').addClass("red");    });      $('#mutable').bind('DOMSubtreeModified', function(e) {      alert('class changed');    });  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  <div id="mutable" style="width:50px;height:50px;">sjdfhksfh    <div>      <div>        <button id="changeClass">Change Class</button>      </div>

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

Answer 2

I know this is old, but the accepted answer uses DOMSubtreeModified, which has now been deprecated for the MutationObserver. Here's an example using jQuery (test it out here):

// Select the node that will be observed for mutations let targetNode = $('#some-id');  // Options for the observer (which mutations to observe) const config = { attributes: true, childList: false, subtree: false, attributeFilter: ['class'] };  // Callback function to execute when mutations are observed const callback = function(mutationsList, observer) {     for (let mutation of mutationsList) {         if (mutation.attributeName === "class") {             var classList = mutation.target.className;             // Do something here with class you're expecting             if(/red/.exec(classList).length > 0) {                 console.log('Found match');             }         }     } };  // Create an observer instance linked to the callback function const observer = new MutationObserver(callback);  // Start observing the target node for configured mutations observer.observe(targetNode[0], config);  // Later, you can stop observing observer.disconnect();