Calling an event handler with an argument

Question

I am trying to call an event handler with an argument. It works fine without an argument.

Where am I going wrong here?

var box = $("#box");

function changeColor (a) {
    $(this).css("background", a);
}

box.click(changeColor("green"));

All arguments are evaluated first. So if you have `foo(bar())`, `bar` is called first and its return value is passed to `foo`. — Felix Kling, Feb 20 '14 at 16:46
Also a duplicate of [How can I pass arguments to event handlers in jQuery?](http://stackoverflow.com/q/979337/218196) — Felix Kling, Feb 20 '14 at 16:48
@navigator You may want to read our Help Center some. We prefer to have duplicates link back to their originals. — Andrew Barber, Feb 20 '14 at 19:02

score 2 · Accepted Answer · answered Feb 20 '14 at 16:52

2

You need to use call() to call your function inside click event:

var box = $("#box");

function changeColor (a) {
    $(this).css("background", a);
}

box.click(function(){
   changeColor.call(this, "green");
});

Fiddle Demo

answered Feb 20 '14 at 16:52

Felix

37,892
8
43
55

Tushar Gupta - curioustushar · Answer 2 · 2014-02-20T16:54:17.440

0

Use .call()

Fiddle Demo

box.click(function(){
   changeColor.call(this, "green");
});

edited Feb 20 '14 at 16:54

answered Feb 20 '14 at 16:45

Tushar Gupta - curioustushar

58,085
24
103
107

@navigator check updated answer with demo --> http://jsfiddle.net/cse_tushar/hU9Xy/ – Tushar Gupta - curioustushar Feb 20 '14 at 16:56

score 0 · Answer 3 · answered Feb 20 '14 at 16:46

You are calling your changeColor function instead of passing it as callback. Instead you should do :

box.click(changeColor.bind(this, "green"));

The bind method creates a new function with arguments already filled, it is almost equivalent to doing :

box.click(function () {
    changeColor("green");   
});

score 0 · Answer 4 · answered Feb 20 '14 at 16:48

0

var box = $("#box");

function changeColor (a) {
    $(this).css("background", a);
}

box.click(function(){
   changeColor("green");
});

answered Feb 20 '14 at 16:48

kakabali

3,824
2
29
58

Josh Durham · Answer 5 · 2014-02-20T17:09:34.890

0

You are trying to assign the return value of changeColor() to box.click() instead of the function itself. Wrapping changeColor() in a function as follows sets the box.click() to the function

box.click(function(){
   changeColor.call(this, "green")
});

See Fiddle

edited Feb 20 '14 at 17:09

answered Feb 20 '14 at 16:49

Josh Durham

1,632
1
17
28

this isn't working i tried this first – navigator Feb 20 '14 at 16:56
The problem was that you need to use `.call()` to set the context of the function call. So you end up setting the value of `this` within the callback. I modified my code to reflect this. – Josh Durham Feb 20 '14 at 17:12

Calling an event handler with an argument

5 Answers5

Linked

Related