Question

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 1

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");