Function is being called without trigger event

Question

I have a function that I want to use in order to expand menus in various places. I expect it to be triggered on a click of menu associated button, but at the moment it is being called on page load (I assume from within document ready), and class 'expanded' is added without clicking on a buton. I am confused to why this happens, as it should be called .on('click' ..

jQuery(document).ready(function ($) {
    'use strict';

    $('#btn-expand-mobile-nav').on('click', showMenu('#side-navigation'));

});

function showMenu(menu) {
    var x = $(menu),
        y = 'expanded';
    if (x.hasClass(y))
        x.removeClass(y);
    else
        x.addClass(y);
}

Unrelated, but consider using `toggleClass`. – Dave Newton Apr 30 '15 at 10:53 — Dave Newton, Apr 30 '15 at 10:53
http://stackoverflow.com/a/7969111/438992 – Dave Newton Apr 30 '15 at 10:54 — Dave Newton, Apr 30 '15 at 10:54

iCollect.it Ltd · Accepted Answer · 2015-04-30T11:15:48.320

4

You are calling the function immediately. Instead defer the execution using an anonymous function:

$('#btn-expand-mobile-nav').on('click', function(){
     showMenu('#side-navigation')
});

If there were no parameters you could have done this:

$('#btn-expand-mobile-nav').on('click', showMenu);

Simplistic explanation for @skobaljic:

By using the function name alone, you are pointing at the variable showMenu and saying call this later as a function.

By using function(){} you are saying, here is a temp variable, containing a function, that you can call later.

e.g. it is the same as:

var temp = function(){
     showMenu('#side-navigation')
}
$('#btn-expand-mobile-nav').on('click', temp);  // No parenthesis on temp

As @Dave Newton rightly points out, this can be simplified using toggleClass:

$('#btn-expand-mobile-nav').on('click', function(){
     $('#side-navigation').toggleClass("expanded");
});

edited Apr 30 '15 at 11:15

answered Apr 30 '15 at 10:50

iCollect.it Ltd

92,391
25
181
202

This is interesting, why the function without parameters is not called, but the one with parameters is? – skobaljic Apr 30 '15 at 10:52
@skobaljic: The one without parameters has no `()` – iCollect.it Ltd Apr 30 '15 at 10:53
Would `$('#btn-expand-mobile-nav').on('click', showMenu.bind(this, '$side-navigation'));` work? – Andy Apr 30 '15 at 10:53
Yes, but why? The explanation would fit well in your answer, would like to see it. – skobaljic Apr 30 '15 at 10:53
1

@Andy: That's a horrible alternative :) – iCollect.it Ltd Apr 30 '15 at 10:54
@skobaljic: Added simplest explanation I could come up with for you :) – iCollect.it Ltd Apr 30 '15 at 10:56
@skobaljic A function reference without parentheses is just the reference, no call. Adding the parens is what turns it from a plain reference into a call. http://stackoverflow.com/a/7969111/438992 – Dave Newton Apr 30 '15 at 10:56
Heh, you like to answer me :) Just wanted [TrueBlueAussie](http://stackoverflow.com/users/201078/trueblueaussie) to improve the answer. – skobaljic Apr 30 '15 at 10:59

Function is being called without trigger event

1 Answers1

Linked