jQuery watch for domElement changes?

Question

I have an ajax callback which injects html markup into a footer div.

What I can\'t figure out is how to create a way to monitor the div for when it\'s contents chang

Answer 1

The most effective way I've found is to bind to the DOMSubtreeModified event. It works well with both jQuery's $.html() and via standard JavaScript's innerHTML property.

$('#content').bind('DOMSubtreeModified', function(e) {
  if (e.target.innerHTML.length > 0) {
    // Content change handler
  }
});

http://jsfiddle.net/hnCxK/

When called from jQuery's $.html(), I found the event fires twice: once to clear existing contents and once to set it. A quick .length-check will work in simple implementations.

It's also important to note that the event will always fire when set to an HTML string (ie '

Hello, world

'). And that the event will only fire when changed for plain-text strings.