Bind callback function with multiple arguments

Question

I would like to bind to the element function, which take several arguments. How to do it right?

For example, I have function:

function test(arg1, arg2, arg3) {
    console.log("arg1:", arg1);
    console.log("arg2:", arg2);
    console.log("arg3:", arg3);
}

and I would like to bind this to element with ID #btn, but all arguments are in array:

var array = ['Hello', ' my', ' world!'];

How can I do this? I will try something like this:

$("#btn").bind("click", array, test);

Any suggestions?

there is a simple solution is by using event data, however you have to change the test function prototype. — King King
– King King, Commented Jun 10, 2014 at 8:04
Depends. Will test() eventually be used to directly handle the click event? — Ja͢ck
– Ja͢ck, Commented Jun 10, 2014 at 8:15
@Jack ah yes, if it's not, we can use an anonymouse function like function(e){} and then access the e.data to get the arguments for the test function called inside. — King King
– King King, Commented Jun 10, 2014 at 8:17
@Niezbor You mean unbind()? Though, on() and off() are preferable (according to docs). — Ja͢ck
– Ja͢ck, Commented Jun 10, 2014 at 8:20

xdazz · Accepted Answer · 2014-06-10 08:18:04Z

4

You could do like below:

var array = ['Hello', ' my', ' world!'];

$("#btn").bind("click", function() {
  test.apply(null, array);
});

Or using $.proxy method to add the arguments by:

$("#btn").bind("click", $.proxy.apply($.proxy, [test, null].concat(array)));

edited Jun 10, 2014 at 8:18

answered Jun 10, 2014 at 8:03

xdazz

161k38 gold badges255 silver badges278 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Niezborala Over a year ago

Why first of argument in apply is null?

xdazz Over a year ago

@Niezbor First argument decides what is this in the function, in op's case, it doesn't matter.

King King Over a year ago

@Niezbor the explanation of xdazz is enough, in fact my explanation was a bit wrong about the this keyword, you can still use the this keyword in your function but it will refer to some outer context, such as the window object.

Amadan · Accepted Answer · 2014-06-10 08:03:25Z

1

Make a closure.

$('#btn').bind("click", function() { test('Hello', 'my', 'world'); });

or

$('#btn').bind("click", function() { test.apply(null, array); });

answered Jun 10, 2014 at 8:03

Amadan

200k23 gold badges253 silver badges321 bronze badges

Comments

Travis J · Accepted Answer · 2014-06-10 08:05:00Z

1

jsFiddle Demo

You could use apply to accomplish that.

$("#btn").bind("click", function(){ test.apply({},array)});

answered Jun 10, 2014 at 8:05

Travis J

82.6k43 gold badges213 silver badges280 bronze badges

Collectives™ on Stack Overflow

Bind callback function with multiple arguments

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related