function as method argument in jquery without writing the entire function definition

Question

From what i understand, in jquery, when a method requires a function as an argument you can't just invoke a predefined function like this:

$('#target').click(myFunction());

...because "myFunction()" will be parsed and replaced with the value returned by the function...which is no longer a function.You have to put the entire function definition, in an anonymous function:

$('#target').click(function() {
   alert('Handler for .click() called.');
});

...so, is there any way of just invoking the function where it's required as an argument?

rsp · Accepted Answer · 2011-03-05 17:04:07Z

4

You understand correctly. It is true not only in jQuery, this is how JavaScript works. When a function is needed as an argument, then you have to give a function as an argument, and not the result of its invocation. You can use this:

$('#target').click(myFunction);

but for alert you need an anonymous function because you are passing an argument.

answered Mar 5, 2011 at 17:04

rsp

112k31 gold badges210 silver badges185 bronze badges

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

4 Comments

user166390 Over a year ago

+1 Addendum: Functions in JavaScript are just objects that can be applied [read: invoked] with the () operator. That is, fn() evaluates the expression fn to the function-object (say fn is fn = function () { ... } or function fn () { ... }) and then the () operator invokes the function-object and the value of the expression is the result of that invocation [read: what was return'ed]. Thus, without the () operator, the name of a function evaluates to the function-object itself. (This is a good bit different than how Java/C/C++/C# (or even Ruby) work but similar to Python.)

bogdan Over a year ago

thanks...so you can't invoke it with arguments: $('#target').click(myFunction(arg1, arg2)); ?

user166390 Over a year ago

@bogdan You can -- but that passes the result of myFunction(arg1, arg2) as the value to click [see ()]. This is case for a closure: elm.click(function () { myFunction(arg1, arg2) }), where arg1 and arg2 are free variables in the enclosing scope. Note that the function-object returned by function () { ... } is not evaluated (applied/invoked), but rather passed as the argument to click -- click will invoke the function-object passed in later when an event occurs and that (anonymous) function object invokes myFunction with the given variables (hopefully) bound in a closure.

bogdan Over a year ago

@pst Thank you for the in depth explanation :)

Andomar · Accepted Answer · 2011-03-05 17:05:21Z

2

You are passing the result of the function, not the function itself. Instead of:

click(myFunction());

use

click(myFunction);

Live example on jsfiddle.

answered Mar 5, 2011 at 17:05

Andomar

239k55 gold badges387 silver badges412 bronze badges

Collectives™ on Stack Overflow

function as method argument in jquery without writing the entire function definition

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related