Event For DOM Object Creation

Question

How would one fire an event that fires every time a div is created?

I was thinking something along the lines of this, but clearly not.

$("#content").on("create", "div.block", function () {
    $(this).css({"background-color":"#FF0000"});
});

I have discovered MutationObserver (https://stackoverflow.com/a/11546242/165737), however as seen in the comments this does not work in IE.

I think this may be a duplicate. Try reading this answer: http://stackoverflow.com/questions/3321060/fire-javascript-event-on-object-creation — Matt, Oct 04 '13 at 09:51
I think you'll find there are other browsers (besides IE) where the DOM4 mutation observers don't work either. — nnnnnn, Oct 04 '13 at 09:52
As an alternative of [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver), you may use a timmer and check the length of the `$('content div.block').length` with initial length. — The Alpha, Oct 04 '13 at 09:56
What do you need that event for? Looks like a [XY-problem](http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem). — Bergi, Oct 04 '13 at 10:03
You want to know when a `div` is *created* or when it's appended to the document? — David Thomas, Oct 04 '13 at 10:22
@Bergi I want to be able to add some functionality to all divs when they are inserted into the DOM based on data that is set against the div. — Matt Skeldon, Oct 04 '13 at 10:33
@nnnnnn what other browser limitations are there? I have only seen references saying IE so far. (apprently it is supported in IE10) — Matt Skeldon, Oct 04 '13 at 10:34
@DavidThomas I have a menu that loads pages into a div on the right hand side of the screen. This page that is loaded contains these div.block objects. I would like to fire the event on the creation of these. — Matt Skeldon, Oct 04 '13 at 10:36
@M.S, Check my answer (also fiddles and comment link), you may want something like this but not sure. — The Alpha, Oct 04 '13 at 10:52
When last I looked, which was a while ago, it was just Chrome and FF, but I guess the other well known browsers have caught up. Though I think it is IE11, not 10. Anyway, I was thinking of mobile browsers. — nnnnnn, Oct 04 '13 at 12:57

kasper Taeymans · Answer 1 · 2013-10-04T10:05:01.423

0

you could use a mutation event (DOMNodeInserted)... however IE might not fully capable of dealing with that.

http://jsfiddle.net/kasperfish/AAd8f/

$(function() {
    $('#btn').click(function(){
        $('body').append('<div style="width:30px;height:30px;border:1px solid black"></div>');
    });


    $(document).on('DOMNodeInserted', function(e) {

        $(e.target).addClass('blue');
    });
});

I like to note that it is better to use callback events instead of listening to the DOM. You'll need to write a callback after a div is inserted in the DOM. I don't think there is an other (non-hacky) way to accomplish this.

edited Oct 04 '13 at 10:05

answered Oct 04 '13 at 09:59

kasper Taeymans

6,950
5
32
51

This is pretty much similar to what I was hoping for, unfortunatly even the fiddle does not seem to work in IE10 as was suggested in your answer. (Other browsers I have tested seem fine) – Matt Skeldon Oct 04 '13 at 10:53

The Alpha · Answer 2 · 2013-10-04T10:38:40.130

0

You may try something like this instead of MutationObserver to get notified when ever a div.block has been added to the div#content

$(function(){
    var c = $('#content'), l = c.find('.block').length;
    setInterval(function(){
        var lOld = l;
        if(c.find('.block').length > lOld) {
            l = c.find('.block').length;
            c.find('.block').css({"background-color":"#FF0000"});
        }
    }, 100);
});

An example and here is another example with multiple Background color effect.

edited Oct 04 '13 at 10:38

answered Oct 04 '13 at 10:27

The Alpha

143,660
29
287
307

Another [updated fiddle here](http://jsfiddle.net/4eTcx/7/) to get the new element after insertion so `OP` can check the last element's `text/html` or whatever he wants. – The Alpha Oct 04 '13 at 10:51
This works great, however it does seem like quite an overhead running a timer all the time. Would that be the case? – Matt Skeldon Oct 04 '13 at 11:01
@M.S, it's expensive though but won't be a problem (performance) I think, at least it works on every browsers with ease, [check this answer](http://stackoverflow.com/questions/7394010/two-javascript-timers-vs-one-timer-for-performance-is-it-worth-dropping-one). – The Alpha Oct 04 '13 at 11:42

Event For DOM Object Creation

2 Answers2