Why aren't these Javascripts the same?

Question

$(document).ready(function() {
    $("button").on("click", TestFunction());
});

function TestFunction() {
    console.log("Function called");
    $b = $("#test");
    $b.remove();
}

vs

$(document).ready(function() {
    $("button").on("click", function() {
        $b = $("#test");
        $b.remove();          
    });
  });

The first one removes the button #test as soon as the page loads. No need to click the button, it just removes it. The second works as expected. The button is displayed and is not removed until it is called.

What part of the Javascript syntax / jQuery API am I not undertanding? I thought the handler parameter passed to .on() was a function. I passed it a function in the first example, and it seems to have called it, but it ignores the "click".

Shouldn't whatever is it inside a function be ignored until the function is called?

Because one passes the function and the other calls the function. — Bergi, May 10 '17 at 04:19
*"Shouldn't whatever is it inside a function be ignored until the function is called?"* That's exactly what you are doing with `TestFunction()`. `()` after a function reference always calls that function. `foo(bar())` calls `bar` first and passes its return value to `foo`. `foo(bar)` passes the value of `bar` (i.e. the function object itself) to `foo`. — Felix Kling, May 10 '17 at 04:19
In addition to the linked duplicate, see [this question](http://stackoverflow.com/questions/14518170/event-handler-for-click-event-fires-automatically-jquery) (and others). — nnnnnn, May 10 '17 at 04:30

Mμ. · Accepted Answer · 2017-05-10T04:36:15.447

5

The second parameter of $("button").on accepts a function and NOT a return value of the function (unless, the return value is of type function). You did it right for the second version but not the first one. So to fix your issue in the first version, you have to pass in a function instead like so:

$(document).ready(function() {
    $("button").on("click", TestFunction);
});

edited May 10 '17 at 04:36

answered May 10 '17 at 04:17

Mμ.

8,382
3
26
36

Ah, that is what I failed to understand. Passing with () calls the function and returns a value. Without () it just references the function, correct? – PatrickSJ May 10 '17 at 04:31
*"The second parameter of $("button").on accepts a function and NOT a return value of the function."* - Noting that the return value from a function could be a reference to another function. (It's not in the OP's code, but it *could* be in other code.) – nnnnnn May 10 '17 at 04:31
@nnnnnn Nice one! I've edited my answer – Mμ. May 10 '17 at 04:39

score 0 · Answer 2 · answered May 10 '17 at 04:20

0

$ ( document ). ready ( function () { 
$ ( "button" ). on ( "click" , TestFunction); });

That should work now, The () calls the function immediately while without them you are passing the function value

answered May 10 '17 at 04:20

user7951676

377
2
10

score 0 · Answer 3 · answered May 10 '17 at 04:22

In first way of binding event, you are actually calling a function and what ever this function returns will be bind with button's on click event.

So instead of calling a function, you should pass only the function name that should be bind with an element.

$(document).ready(function() {
    $("button").on("click", TestFunction);
});

Why aren't these Javascripts the same?

3 Answers3