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

deprecated: as per @Meglio's comment below, the DOMNodeInserted event is deprecated, and will be removed from the web at some unkown time in the future. For the best results, start learning about the MutationObserver API.

see @dain's answer below.

If you bind the 'DOMNodeInserted' event to the document or body directly, it will get executed every time anything is inserted anywhere. If you want the callback to run only when a particular kind of element is added, you would be wise to use delegated events.

Usually, if you are adding a class of elements to the DOM you will be adding them to a common parent. So attach the event handler like this:

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

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

NOTE:

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

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


The .livequery() plugin still serves this niche need, like this:

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

If you pass it just a callback function like above, it'll run for each new element it finds, both initially and as they're added. Inside the function this refers to the just-added element.

.live() listens for events that bubble, so doesn't fit this "when elements are added" situation, in that respect, .livequery() (the plugin) wasn't completely replaced by the addition of .live() to core, only the event bubbling portion (for the most part) was.


If you're living on the cutting edge 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 quite old, now MutationObserver is supported by all browsers except Opera Mini: http://caniuse.com/#feat=mutationobserver

Also, here's the direct link the the API on MDN: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver


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

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

This may be preferable to using liveQuery as that plugin is a bit stale (no updates for 2+ years, only promises support for jQuery 1.2.x).


Take a look at insertionQuery. It's an interesting library that uses CSS to detect new elements. Because it uses CSS there's no performance hit and you get returned the actual elements matching the selector.