jQuery .on() method calling a function inmediatly

Question

I'm no JavaScript expert (far from it) and I just have superficial experience with jQuery — nothing too fancy. I'm having the following code:

    // show search forms
    searchButton = jQuery('#show-search');
    searchForm = jQuery('#search-form');

    function toggleSearch() {
        searchButton.button('toggle');

        searchForm.slideToggle(300, function() {
                searchForm.find('#value').focus();
            });
    }

    searchButton.on('click', toggleSearch());

When the page loads, the #search-form is in fact activated and it slides down, without the need of calling the function (i.e actually clicking the button).

According to this post I can pass the function like this:

    searchButton.on('click', toggleSearch);

And it will do the same as if I was doing this:

    searchButton.on('click', function() {
        toggleSearch();
    });

It works. Both methods do.

Why does this work and why can't I just use the first form? (passing toggleSearch())
What if there is a variable called toggleFunction with some random value? Wouldn't it be passed instead of the function?

EDIT: I'm aware of this excellent answer but it doesn't explain the "reference" part, nor the case of a previously assigned variable. Are annonymous functions neccesary in those cases? Should I just use them every time?

@Pablo It's not about the methods working, it's more about why do they work. — AeroCross
– AeroCross, Commented Mar 15, 2012 at 3:13

tvanfosson · Accepted Answer · 2012-03-15 03:08:31Z

2

When you use toggleSearch() you are actually running the function and the return of the function is used as the handler. When you omit the parentheses you are passing a reference to the function and the function itself will be invoked when the event occurs.

In the case of the two functions that "work", the first is as I've described. In the second, you're passing an anonymous function reference as the handler. This anonymous function runs the method when it is called, not when it is defined, thus working the same way as passing just the function reference. If you need to pass arguments to the function, the second method is the way to do that.

searchButton.on('click', function() { // this is the handler
    // this is run when the hander executes
    toggleSearch( 'some parameter', 'some other parameter' );
});

answered Mar 15, 2012 at 3:08

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

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

2 Comments

AeroCross Over a year ago

The toggleSearch() function doesn't return anything, so what would be the "handler" in this case?

tvanfosson Over a year ago

@AeroCross If it doesn't return anything then the handler will be undefined.

xdazz · Accepted Answer · 2012-03-15 03:27:39Z

1

() makes you execute the function, if you use toggleSearch(), you are passing the return value(※which in your case is undefined) to .on, not the function itself.

toggleFunction is the function name, but also is a variable, it is same as

var toggleFunction = function() {/*...*/};

So if there is another variable called toggleFunction, the toggleFunction will be changed.

edited Mar 15, 2012 at 3:27

answered Mar 15, 2012 at 3:14

xdazz

161k38 gold badges255 silver badges278 bronze badges

1 Comment

AeroCross Over a year ago

This cleared out a LOT of confusion: "If you use toggleSearch(), you are passing the return value (which in your case is undefined) to .on, not the function itself." and "... is the function name, but also a variable". Now I understand a little bit more about how JavaScript works. +1 to this mate, cheers!

Collectives™ on Stack Overflow

jQuery .on() method calling a function inmediatly

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related