Is there a jquery event that fires when a new node is inserted into dom?

Question

Is there a jquery event when the dom element fires when it is inserted into the dom?

eg. let's say I load some content through ajax and add it to the DOM, and in another part of javascript I can add an event using .live (), so that when an event corresponding to a particular selector is added to the DOM, the event fires when the element is mentioned. Like $ (document) .ready (), but in content that is dynamically added to the DOM.

What I dream about:

$('.myClass').live('ready', function() { alert('.myClass added to dom'); }); 

If jquery doesn't support such a thing, is there another way to achieve this functionality without modifying the code that actually performs the initial dom manipulation?

Answer 1

.livequery() plugin still executes this niche, for example:

 $('.myClass').livequery(function() { alert('.myClass added to dom'); }); 

If you give it only the callback function, as described above, it will be executed for each new element found, both initially and as it is added. Inside the function, this refers to an element with an added additive.

.live() listens for events that bubble up, so it does not correspond to this “when elements are added” situation, in this regard .livequery() (plugin) has not been completely replaced by adding .live() to the kernel, only part of the event bubbles (for the most part parts) was.

Answer 2

deprecated : according to a comment by @Meglio below, the DOMNodeInserted event DOMNodeInserted deprecated and will be removed from the Internet at some genuine future time. For best results, start exploring the MutationObserver API .

see @dain answer below .

If you attach the 'DOMNodeInserted' event to a document or body directly, it will be executed every time something is inserted anywhere. If you want a callback to be triggered only when a certain type of element is added, it would be wise to use delegated events .

Usually, if you add a class of elements to the DOM, you add them to the common parent. Therefore, attach an event handler as follows:

 $('body').on('DOMNodeInserted', '#common-parent', function(e) { if ($(e.target).attr('class') === 'myClass') { console.log('hit'); } }); 

Basically the same answer as Myke above , but since you are using a delegated event handler rather than a direct event handler, the code there will be fired less often.

Note:

 $('body').on('DOMNodeInserted', '.myClass', function(e) { console.log(e.target); }); 

It seems to work too ... but I don't know why.

Answer 3

If you live at the forefront, you can use MutationObserver :)

  var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver; var list = document.querySelector('ol'); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { if (mutation.type === 'childList') { var list_values = [].slice.call(list.children) .map( function(node) { return node.innerHTML; }) .filter( function(s) { if (s === '<br>') { return false; } else { return true; } }); console.log(list_values); } }); }); observer.observe(list, { attributes: true, childList: true, characterData: true }); 

See: https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/

Edit: this answer is pretty old, now MutationObserver is supported by all browsers except Opera Mini: http://caniuse.com/#feat=mutationobserver

In addition, here is a direct API link to MDN: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Answer 4

There is no jQuery event, but there is a DOM: DOMNodeInsertedIntoDocument event. You can listen for DOM events using jQuery by method. So:

 $('.myClass').on('DOMNodeInsertedIntoDocument', function() { alert('myClass was inserted into the DOM'); } 

It may be preferable to use liveQuery, as this plugin is a bit dated (no updates for 2+ years, only promises jQuery 1.2.x support).

Answer 5

Take a look at insertionQuery . This is an interesting library that uses CSS to discover new elements. Since it uses CSS, there is no performance, and you return the actual elements matching the selector.