I want to execute a function when new dom elements are added somewhere in the body

I would like to execute a function when new dom elements are added via ajax, somewhere in the body, by a 3er party JS.

The function i want to execute is jqueryui's tooltip(), which changes title attribute into nice tooltips.

The problem happens when a 3rd party JS adds new elements to many differents div's, and the new element's 'title' attribute are not being substituted by tooltips. So I need to do again:

$('*').tooltip()

I think 开发者_运维知识库I need something checking if new elements have been added to the body, and run the function on them.

Any ideas ?

Have a look at liveQuery it does what you need.

I did the same in one of my project which is I needed to listen to the DOM changes., e.g. DOM append, remove, attribute, and data changes.

Actually, the browser itself provides the native function/DOM changes listener which is the "Mutation Observer".

These links WILL help you :

1. https://github.com/kapetan/jquery-observe
2. Is there a JavaScript/jQuery DOM change listener?
3. https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#mutationobserver