Why are non-anonymous functions being executed when using click event handler?

Question

I've been exploring the use of custom functions for event handlers. In this stripped down example, I'm trying to get an alert to pop up when the user clicks a button.

But the alert box pops up immediately as the page loads! What am I doing wrong? ( the commented portion does the exact same thing).

If I define the bclick() function like

function bclick(foo, bar){ ... }

The result is also the same.

JS in the header:

<script type="text/javascript">

var bclick = function(foo, bar){alert( foo + "  " + bar + "\n");}

//$(document).ready(function(){
//    $("button").click(bclick("Button","Clicked"));
//    });

$("button").click(bclick("Button","Clicked"));

</script>

Relevant HTML in the body:

<button>Click Me!</button>

Sasha Chedygov · Accepted Answer · 2023-10-19 22:06:26Z

23

You're evaluating your function before you even pass it.

$("button").click(bclick("Button","Clicked"))

Here, bclick is called with those arguments, and the result is being passed to the click method. You want to pass it like a normal variable, like this:

$("button").click(bclick)

The obvious problem with this, though, is the fact that custom arguments aren't passed in. To resolve this, you could pass in an anonymous function that calls your function:

$("button").click(() => {
  bclick("Button", "Clicked")
})

edited Oct 19, 2023 at 22:06

answered Jun 4, 2009 at 1:39

Sasha Chedygov

132k27 gold badges107 silver badges117 bronze badges

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

4 Comments

gnarf Over a year ago

You could if you use $("button").click(function(){bclick("Button", "Clicked");});

user105090 Over a year ago

This is a trivial example, I know, but this was where I got stuck in something more complicated. Thanks a lot!

matthy Over a year ago

thank you! you saved my keyboard from going into pieces I cannot believe there is such a big difference between $("button").click(bclick); and $("button").click(bclick());

Hube Over a year ago

thx that helps, you can pass this as well function() { funcName($(this)); }

Sasha Chedygov · Accepted Answer · 2009-06-04 03:47:55Z

1

As musicfreak said. However if you want to be really tricky and use the code you have, then youd just need to add return this at the end of your bclick function.

edited Jun 4, 2009 at 3:47

Sasha Chedygov

132k27 gold badges107 silver badges117 bronze badges

answered Jun 4, 2009 at 3:38

Darko

39k15 gold badges85 silver badges107 bronze badges

1 Comment

user105090 Over a year ago

Thanks, I'll mess around with both, I'm sure!

josh3736 · Accepted Answer · 2013-10-11 19:32:23Z

1

If you want to pass arguments when setting up your event handler, another alternative is to return a function.

$("button").click(bclick("Button","Clicked"));

function bclick(foo, bar) { // called once when the event handler is setup
    return function(e) { // called every time the event is triggered
        // you still have the original `foo` and `bar` in scope,
        // and a new `e` (event object) every time the button is clicked
        console.log(foo, bar, e);
    };
}

answered Oct 11, 2013 at 19:32

josh3736

146k34 gold badges227 silver badges273 bronze badges

Collectives™ on Stack Overflow

Why are non-anonymous functions being executed when using click event handler?

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related