Jquery event handler works only with anonymous function?

Question

I have some jQuery that changes a bit of text when a button is clicked. This code works fine when implemented within an anonymous function (nn_list is a globally defined array of strings, nn_flag predefined as false):

$(document).ready(function(){
    $("#nn_button").click(function(){
        $('.nickname').empty();

        var random_name = nn_list[Math.floor(Math.random() * nn_list.length)];
        console.log(random_name);
        $('.nickname').append("<p>" + random_name + "</p>");
    });
});

But it doesn't work (doesn't change the text) when I implement it as a non-anonymous function:

var main = function(){
    $("#nn_button").click(function(){
        $('.nickname').empty();

        var random_name = nn_list[Math.floor(Math.random() * nn_list.length)];
        console.log(random_name);
        $('.nickname').append("<p>" + random_name + "</p>");
    });
}
$(document).ready(main());

Can someone explain to me what changes between those two implementations that makes the anonymous function work, but not the other?

Amit · Accepted Answer · 2016-05-13 23:46:53Z

3

You need to pass a reference to the function, not call it:

$(document).ready(main);

answered May 13, 2016 at 23:46

Amit

46.5k9 gold badges84 silver badges114 bronze badges

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

Comments

scniro · Accepted Answer · 2016-05-13 23:47:09Z

3

Just pass it, don't invoke it. Observe the following....

$(document).ready(main());

=>

$(document).ready(main);

answered May 13, 2016 at 23:47

scniro

17k8 gold badges67 silver badges108 bronze badges

1 Comment

ViggyNash Over a year ago

facepalm Makes perfect sense, once I think about it. Thanks for quick answer.

Collectives™ on Stack Overflow

Jquery event handler works only with anonymous function?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related