javascript - Watch for Dynamically Added Class

Question

Is there a listener where I can watch and run code if a class is dynamically added to an element? I'm on a WordPress CMS and a plugin I'm using us adding a class dynamically, I want to catch on when that happens and run some custom code.

change / onChange doesn't seem to work:

$('#test').change(function(){
    alert('test');
});

Is there another listener I can add that will catch this?

I didn't think it mattered at first, but the dynamic class(es) are being added after an ajax call. I'm currently trying to work with ajaxComplete() but not having any luck.

Answer 1

Try

$(document).ready(function() {

var target = $("#test").get(0);

// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    // do stuff when
    // `attributes` modified
    // i.e.g., 
    alert(mutation.type);
    target.innerHTML = "class added: " 
                       + "<em>" 
                       + target.className 
                       + "</em>";
  });    
});

// configuration of the observer:
var config = { attributes: true };

// pass in the target node, as well as the observer options
observer.observe(target, config);

    $("#test").addClass("test-1");

    // later, you can stop observing
    // observer.disconnect();

})

jsfiddle http://jsfiddle.net/guest271314/35cVL/

see https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver