How to add callback function in jQuery?

Question

function $(id) {
    if (id) {
        if (window === this) {
            return new $(id);
        }

        this.e = document.getElementById(id);
        return this;
    } else {
        return about;
    }
}

$.prototype = {
    click: function () {
        this.e.onclick = function () {
            alert("hi..");
        }
    }
};

when I excute this code :

$("skg").click2();

it return alert msg.

But I want to add a callback function like this :

$("skg").click(function(){
    alert("hi SKG");
});

How to do this?

Andreas Louv · Accepted Answer · 2012-03-01 09:54:27Z

Example 1

$.prototype = {
    click: function (callback) {
        this.e.onclick = callback
    }
};

but if you want to parse the DOM element you can do something like this:

Example 2

$.prototype = {
    click: function (callback) {
        this.e.onclick = function() {
           callback.call(this); 
        }
    }
};

EDIT:

Haha... Actually there is almost no difference.

But if you want to parse some custom arguments to your callback you can do it in the last example:

your call:

var handler = function(arg1, arg2, arg3, ...) {
    alert("Some alert");
};
$("someID").click(handler);

Example 1:

handler gets DOM element as this so:

this = [HTML DOMElement]

The first arguments in handler (called arg1 (can also be accessed throw the array like variable arguments as the first arguments[0])) contains the click's event property.

arguments[0] = [Event Object]

Example 2:

this = [HTML DOMElement]

Thats all. But you have the ability to parse extra arguments to the hander:

If your code is like this:

$.prototype = {
    click: function (callback) {
        this.e.onclick = function(event) {
           callback.call(this, event, {custom: "argument"} ); 
        }
    }
};

The handler will get:

arguments[0] = [Event Object] // Same as Example 1

But see now:

arguments[1] = [Object object]

or more precise:

arguments[1] = {custom: "argument"}

And as before you can access it throw arg2 but also the array like arguments[1].

When i say array like i mean:

It have some of the same abilities as an array:

The length property: .length (arguments.length).

The 0-index naming: [n] (arguments[0], arguments[1], ...)

But none of the native array methods like sort, push, pop, splice.

Even more but :) (And just a site note)

You can use array like objects in with native array method:

Lets say the arguments is like this: handler("a", "b", "c", "d")

and you only want the the 2th argument and higher:

var args = [].splice.call(arguments, 0, 1)

Now args is a native array with: ["b", "c", "d"].

Both work fine. Thanks But what is the difference between the above two method. Would you please explain it.

Andreas Louv · Accepted Answer · 2012-02-29 14:38:41Z

1

look at function invocation via call/apply etc

function click( object, func ){

    // arguments[0] == object
    // arguments[1] == func

    var args = []; // empty array
    // copy all other arguments we want to "pass through" 
    for(var i = 2; i < arguments.length; i++){
        args.push(arguments[i]);
    }

    func.apply(object, args);
}

edited Feb 29, 2012 at 14:38

Andreas Louv

47.3k14 gold badges109 silver badges126 bronze badges

answered Feb 29, 2012 at 14:28

scibuff

13.8k2 gold badges30 silver badges34 bronze badges

2 Comments

scibuff Over a year ago

indeed, this addresses this issue in general (at a very low level), if he needs just an additional click listener/handler than other solutions here will do

Andreas Louv Over a year ago

you can make args like this: var args = [].splice.call(arguments, 0, 2)

Jivings · Accepted Answer · 2012-02-29 14:25:38Z

0

Change that click function to take a method parameter and set the onclick event to that method:

click : function (callback){
           this.e.onclick = callback
}

answered Feb 29, 2012 at 14:25

Jivings

23.3k7 gold badges63 silver badges102 bronze badges

Comments

Dave Newton · Accepted Answer · 2012-02-29 14:26:12Z

0

Add a parameter to your click function.

click: function (f) {
           this.e.onclick = f;
       }

answered Feb 29, 2012 at 14:26

Dave Newton

161k27 gold badges263 silver badges310 bronze badges

Collectives™ on Stack Overflow

How to add callback function in jQuery?

4 Answers 4

EDIT:

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

EDIT:

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related