jQuery-Watch is a nice little plugin that monitors CSS, Attribute or Property changes in an element.

It uses the MutationObserver internally for modern browsers and uses setInterval() polling as a fallback for older browsers.

MutationObserver Syntax

Browser Support / Polyfill

var element = document.getElementById("Notebox");

var observer = new MutationObserver(observerChanges);
observer.observe(element, {
    attributes: true,
    subtree: opt.watchChildren,
    childList: opt.watchChildren,
    characterData: true
});

/// when you're done observing
observer.disconnect();

function observerChanges(mutationRecord, mutationObserver) {
    console.log(mutationRecord);
}

var element = document.getElementById("Notebox");

var observer = new MutationObserver(observerChanges);

observer.observe(element, {

attributes: true,

subtree: opt.watchChildren,

childList: opt.watchChildren,

characterData: true

});

/// when you're done observing

observer.disconnect();

function observerChanges(mutationRecord, mutationObserver) {

console.log(mutationRecord);

}

jQuery-Watch Syntax

$("#btnChangeContent").click(function () {
    // assign text programmatically
    $("#SomeContent").text("Hello - time is " + new Date());
});
// watch the content
$("#SomeContent").watch({
    properties: "prop_innerHTML",
    watchChildren: true,
    callback: function (data, i) {
        console.log("text changed");
        alert('text changed' + data.vals[i]);
    }
});

$("#btnChangeContent").click(function () {

// assign text programmatically

$("#SomeContent").text("Hello - time is " + new Date());

});

// watch the content

$("#SomeContent").watch({

properties: "prop_innerHTML",

watchChildren: true,

callback: function (data, i) {

console.log("text changed");

alert('text changed' + data.vals[i]);

}

});

jQuery-Watch on Github

Get notified for CSS, Attribute or Property changes in an element

MutationObserver Syntax

jQuery-Watch Syntax

Alexander