CODEWITHSUNDEEP
javascriptjquery
MotionGrafika
MotionGrafika

Reputation: 1131

Override jQuery functions

Is there way to override jQuery's core functions ? Say I wanted to add an alert(this.length) in size: function() Instead of adding it in the source 

size: function() {
    alert(this.length)
    return this.length;
},

I was wondering if it would be possible to do something like this :

if (console)
{
    console.log("Size of div = " + $("div").size());
    var oSize = jQuery.fn.size;
    jQuery.fn.size = function()
    {
        alert(this.length);

        // Now go back to jQuery's original size()
        return oSize(this);        
    }
    console.log("Size of div = " + $("div").size());
}

Upvotes: 23

Views: 37468

Answers (2)

Lalit Kumar
Lalit Kumar

Reputation: 121

You can override plugins method by prototype it in a separate file without modifying original source file as below::

(function ($) {
    $.ui.draggable.prototype._mouseDrag = function(event, noPropagation) {

         // Your Code
    },

    $.ui.resizable.prototype._mouseDrag = function(event) {
            // Your code
    }   
}(jQuery));

Now put your logic here or original code with your new idea that is needed in your project.

Upvotes: 1

Jacob Relkin
Jacob Relkin

Reputation: 163318

You almost had it, you need to set the this reference inside of the old size function to be the this reference in the override function, like this:

var oSize = jQuery.fn.size;
jQuery.fn.size = function() {
    alert(this.length);

    // Now go back to jQuery's original size()
    return oSize.apply(this, arguments);
};

The way this works is Function instances have a method called apply, whose purpose is to arbitrarily override the inner this reference inside of the function's body.

So, as an example:

var f = function() { console.log(this); }
f.apply("Hello World", null); //prints "Hello World" to the console

Upvotes: 46

Related Questions