Tony Bogdanov Tony Bogdanov - 24 days ago 7
HTML Question

jQuery: How to listen for DOM changes?

Is it possible and how can I listen for changes through the entire DOM tree with jQuery?

My specific issue: I have a 'tooltip' function that displays the contents of the

title
attribute in a stylish way when you do a
hover
on any html element. When you do a hover, however, by standard the browser renders the
title
in its own box. I would like to supress that. So what I've thought of is to move the contents of the
title
attribute to a custom (HTML5)
data-title
attribute the first time the page is loaded, and then my tooltip function will work with
data-title
.

The problem is that later on I might add / remove / change the HTML dynamically, so I need to 'rebind' those elements - change those title attrs again. It would be nice if there was an event listener that would listen for such changes for me and rebind the elements automatically.

Answer

My best guess is that you want to listen to DOM mutation events. You can do that by DOM mutation event as any normal javascript event such as a mouse click.

Refer to this : W3 MutationEvent

Example:

$("element-root").bind("DOMSubtreeModified", "CustomHandler");