Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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());
}
like image 364
MotionGrafika Avatar asked Dec 27 '10 05:12

MotionGrafika


People also ask

Which jQuery function can be used to override events in jQuery?

Use the off() method to override jQuery event handlers. This method is used to remove an event handler. The on() method is used to attach one or more event handler.

Can you override functions in JavaScript?

JavaScript supports overriding not overloading, meaning, that if you define two functions with the same name, the last one defined will override the previously defined version and every time a call will be made to the function, the last defined one will get executed.

What is '$' in jQuery?

$ is pretty commonly used as a selector function in JS. In jQuery the $ function does much more than select things though. You can pass it a selector to get a collection of matching elements from the DOM. You can pass it a function to run when the document is ready (similar to body.


2 Answers

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
like image 143
Jacob Relkin Avatar answered Oct 16 '22 16:10

Jacob Relkin


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.

like image 1
Lalit Kumar Avatar answered Oct 16 '22 17:10

Lalit Kumar