Chrome Extension: fire an event when element created?

Question

I'd like to fire an event when an element is added to the document. I've read the JQuery documentation for on() and the list of events but none of the events seem to concern element creation.

I must monitor the DOM as I do not control when the element is added to the document (as my Javascript is a Chrome Extension content script)

Answer 1

I know this is an old question, that already has an answer, but since things have changed, I thought I'd add an updated answer for people landing on this page looking for an answer.

The DOM Mutation Events have been deprecated. According to MDN (regarding DOM Mutation Events ):

Deprecated
This feature has been removed from the Web. Though some browsers may still support it, it is in the process of being dropped. Do not use it in old or new projects. Pages or Web apps using it may break at any time.

One should use the new MutationObserver API , which is also more efficient.
(The mutation-summary library now provides a useful inteface to this new API.)

Example usage:

// Create an observer instance.
var observer = new MutationObserver(function (mutations) {
  mutations.forEach(function (mutation) {
    console.log(mutation.type);
  });
});

// Config info for the observer.
var config = {
  childList: true, 
  subtree: true
};

// Observe the body (and its descendants) for `childList` changes.
observer.observe(document.body, config);

...

// Stop the observer, when it is not required any more.
observer.disconnect();

Answer 2

As mentioned, I am not creating my own elements, so firing off an event when I create the element isn't an option.

The best solution to this is the Mutation Observer API, for which the Mutation Summary provides a friendly interface.

Answer 3

For the simplest option, you might want to examine LiveQuery which is effectively the 'DOM listener' that you're after. It should be used with caution however, as it has the potential to be quite heavyweight, performance-wise.

If you're preferring to 'roll your own' - with .on() it should work for all current and future elements - but the added elements would need to match the selector. For example, if you wire an event up to all classes of .myClass and you then injected a new element of the same class to the DOM, the event should fire. Effectively, the .on() API rolls-up bind/live/delegate from prior versions of jQuery, the latter two of which work against current and future DOM elements.

Answer 4

As a complement of @SpaceBison's answer, you can create your own events when you create these elements. For example:

function create_element() {
    // Create an element
    $( 'body' ).append( "<p>Testing..</p>" )
    // Trigger
    $( 'body' ).trigger( 'elementCreated' );
}
function monitor_elements() {
    $("body").on("elementCreated", function(event){
    alert('One more');
    });
}

$(document).ready(function(){

     monitor_elements();

     for (var i=0; i < 3; i++) {
         create_element();
     }

});

Live example: http://jsfiddle.net/9NsAh/

But of course, it's only usefull when you create your own elements.