jQuery Event : Detect changes to the html/text of a div

Question

I have a div which has its content changing all the time , be it ajax requests, jquery functions, blur etc etc.

Is there a way I can detect any changes on my div at any point in time ?

I dont want to use any intervals or default value checked.

Something like this would do

$('mydiv').contentchanged() {  alert('changed') } 

Answer 1

If you don't want use timer and check innerHTML you can try this event

$('mydiv').on('DOMSubtreeModified', function(){   console.log('changed'); }); 

More details and browser support datas are Here.

Answer 2

Using Javascript MutationObserver:

// Select the target node. var target = document.querySelector('mydiv')  // Create an observer instance. var observer = new MutationObserver(function(mutations) {     console.log(target.innerText);    });  // Pass in the target node, as well as the observer options. observer.observe(target, {     attributes:    true,     childList:     true,     characterData: true }); 

See the MDN documentation for details; this should work in pretty much all current browser, including IE11.