Question

I was wondering how i snoop on dom modification events. I tried using the $.sub() to listen but it seems a little overfill to use another wrapper from jquery to get this affect.

Demo is here http://jsfiddle.net/sr5RE/2/

i.e this works

var $sub = jQuery.sub();

$sub.fn.init = function(selector){
    alert("Success");
    return $.fn.init.apply($sub.fn.init, arguments);
};

$sub("<p/>");

but calling $ then it doesn’t

$("<p/>");

And obviously this will loop

$.fn.init = function(selector){
    alert("Success");
    return $.fn.init.apply($sub.fn.init, arguments);
};

$("<p/>");

Any ideas?

Answer 1

You can override $.fn.init, just grab a reference to the original one first:

(function(){
    var originalInit = $.fn.init;

    $.fn.init = function(selector){
        alert("Success: " + selector);
        return originalInit.apply($sub.fn.init, arguments);
    };
})();

$("<p/>");

Demo: http://jsfiddle.net/sr5RE/3/

However, this might not help you grab DOM modification events. You might want to poke around the source of Live Query. It’s a jQuery plugin that fires callbacks when elements that match selectors appear and disappear from the document, and it does so by overriding specific modification-related jQuery methods.