I have the following jQuery code:

function next() {
    //some code here
}

function previous() {
    //some code here
}

$("#next").click(function(){
    next();
});

$("#previous").click(function(){
    previous();
});

This works, but this doesn't:

$("#next").click(next());

$("#previous").click(previous());

Why is this happening? Is there a problem in my code, or is this just a thing with jQuery? Note: #next and #previous refer to two buttons in my html file.

I have the following jQuery code:

function next() {
    //some code here
}

function previous() {
    //some code here
}

$("#next").click(function(){
    next();
});

$("#previous").click(function(){
    previous();
});

This works, but this doesn't:

$("#next").click(next());

$("#previous").click(previous());

Why is this happening? Is there a problem in my code, or is this just a thing with jQuery? Note: #next and #previous refer to two buttons in my html file.

• javascript
• jquery
• html

• 2 By putting brackets after the function name you are executing the function and assigning the return value of the function as the callback rather than the function itself. – Adrian Brand Commented Jul 15, 2016 at 5:48

5 Answers 5

The callback should be a reference to the function.

Why $("#next").click(next()); doesn't work?

func() is a function call and not a reference, which is why it is called immediately.

This,

$("#next").click(function(){
    next();
});

is a preferable way in case you need to pass arguments.

Else,

$("#next").click(next) //notice just the signature without ()

This works (if the functions next and previous are defined):

$("#next").click(next);

$("#previous").click(previous);

In this case the next and previous are also callback functions, the difference between the two is,

when you call this line

$("#next").click(next()); the function is executed immediately, and you are passing the result of the next function to the eventHandler of jQuery.

and in this case

$("#next").click(next); you are passing the function next to the EventHandler of jQuery.

Btw.: in the jQuery API Documentation (https://api.jquery./click/) it shows all parameters for the click function and the required types it states: "...handler Type: Function( Event eventObject ) A function to execute each time the event is triggered. ..."

try like this you will get your answer,

function next() {
    //some code here
}

function previous() {
    //some code here
}

$("#next").click(next);

$("#previous").click(previous);

working demo jsfiddle Example

What is going on there is a little bit obscured by the syntax of anonymous functions function() { ... }. What you are doing by that is passing a function, without calling it. And I want to explain how this works:

If you have a simple function

function next() { return 5 };

It will simply return the value 5, if you call it from somewhere:

a = next(); // value of a will be 5

But what you can do too, is to pass the whole function to a. This is possible, because functions in JavaScript are actually objects:

a = next;
b = a();    // value of b will be 5

If you look at the syntax, it shows you, that putting parentheses () at the end of a function invokes it, and returns the return value. While the naked string, without parentheses hands you the function itself.

So what is a callback now, and what does click() like to get as a parameter? A callback function is a function, that gets called later; we actually hand it over, to get called later. click() would like to get such a function as parameter, and it should be clear now, that we have to pass the function without parentheses, to enable click() to call it later, instead of just passing a 5 to it.

$("#next").click(next);

So how does then the initial syntax with the anonymous function work?

function() { next(); }

actually wraps your next() into another function, which is anonymous – because it does not have a name – but is working in the same way as a named function. You can even set a variable by it:

a = function() { next(); }  // a will be the anonymous function that calls next()

But calling that function a() will return nothing, because the anonymous function does not return a value (To be exactly: every function call in JavaScript is returning at least undefined, but that's a technical detail). It can even be called immediately by putting parenthesis at the end of it:

a = function() { return next(); }()   // value of a will be 5

Adding the return there will make sure, the return value of next() will be passed through the anonymous function.

This should make clear why

$("#next").click(function(){ next(); });

is working, and why

$("#next").click(next());

is not, but

$("#next").click(next);

will be a good solution.

$("#next").click(next); would work. Notice parenthesis are not required as the function/callback handler should be passed as a parameter.