Javascript event for DOM Changes

Question

How I can fire an event function if I append data like an image to a div?

I have some Jquery function what appends html to my webpage. I want to call a function to process this data

Is there an event? or something else how I can do custom code if content append?

Thanks

what do you mean by "I append data like an image to a div" ? can you show some code? — bjelli, May 23 '13 at 15:34

score 0 · Accepted Answer · edited May 23 '17 at 12:18

0

What you're talking about is called Monitoring Dom Changes

You may want to look here : http://www.quirksmode.org/js/events/DOMtree.html

There's also another Stack overflow question on that subject : Most efficient method of detecting/monitoring DOM changes?

edited May 23 '17 at 12:18

Community

1
1

answered May 23 '13 at 15:36

blue112

52,634
3
45
54

score 0 · Answer 2 · answered May 23 '13 at 15:37

You would have to override the default jQuery append functionality and add a trigger for append then you can bind a handler to it like so:

$(function() {
    var originalAppend = $.fn.append;

    // override original append
    $.fn.append = function () {
        return originalAppend.apply(this, arguments).trigger("append");
    };
});

$("#myDiv").bind("append", function() { 
    // something was appended to #myDiv
    // code here
});

$("#myDiv").append("<img />");

score 0 · Answer 3 · answered May 23 '13 at 16:14

You can manage your custom events only by creating event handling yourself. For example, in your case I could assume you want to fire some event each time you call appendChild DOM function. The following way could be a possible solution (if we talk about pure JavaScript, but it gives a right way to understand the concept):

function() {
    // of course it could be done better here to remove from array  but it's not the topic
    function removeItem( arr, item) {
        for(var i = 0, s = arr.length; i < s; i++){
            if(arr[i]==item){
                arr.splice( i, 1);
                break;
            }
        }
    };
    // our custom event object
    var MyDomEvents = {
        events = {},
        on : function( evt, handler) {
            this.events[evt] = this.events[evt] || [];
            this.events[evt].push( handler);
        },
        un : function( evt, handler) {
            if (this.events[evt]) {
                removeItem( this.events[evt], handler);
            }
        },
        fireEvent : function() {
           var evt = arguments[0], args = [];
           for (var i = 1, s = arguments.length; i < s; i++) {
               args.push( arguments[i]);
           }
           if (this.events[evt]) {
               for (var i = 0, s = this.events[evt].length; i < s; i++) {
                   if (this.events[evt][i] &&
                     this.events[evt][i].apply( this, args) == false) {
                       return ; // stop an event if it returns false
                   }
               }
           }
        }
    };

    // very dirty but maybe it's something you are looking for
    var orig = HTMLElement.prototype.appendChild;
    HTMLElement.prototype.appendChild = function( node) {
        orig.call( this, node);
        MyDomEvents.fireEvent( 'append', this, node);
    }

    // usage:
    MyDomEvents.on( 'append', function( parent, child) {
        // handle append event
    });
}();

Of course, something similar could be done on jQuery's "append" method or you can use your own "append" method everywhere in your code to not override the DOM's native one (which is really not a good practice, and not all browsers could let you do that). I'm just showing a main concept of how that could be done.

Please, note, I didn't test the code above, I had written it just to show an idea.

Javascript event for DOM Changes

3 Answers3