Jquery Click-handler doesn't work with named function?

Question

I feel like this is one of those problems you only run into after too little sleep or too many coffees...

I have an element

<a id="blah" href="#">somethinghere.com</a>

I define a function

function test(){
    alert('hi');
};

I try to attach the function as a click-handler(https://jsfiddle.net/8r1rcfuw/30/):

$('#blah').on('click', test());

and load the page, and the handler executes immediately - without any clicks.

However when I just use an anonymous function as a handler(https://jsfiddle.net/8r1rcfuw/36/) :

$('#blah').on('click', function(){
    alert('hi');
});

it works fine

Doing both (https://jsfiddle.net/8r1rcfuw/39/):

$('#blah').on('click', function(){
    test();
});


function test(){
    alert('hi');
}

seems to work fine - but seems a little redundant.

This feels like something I've done 1000 times before - what gives?

$('#blah').on('click', test()); ==> $('#blah').on('click', test); Remove invocation. — Tushar
– Tushar, Commented Aug 31, 2016 at 9:37

Jorgeblom · Accepted Answer · 2016-08-31 09:44:02Z

2

The event handler has to be a function, and you are passing the result of a function to it:

$('#blah').on('click', test());

is the same as:

$('#blah').on('click', undefined); //As your funcion doesn't return anything

Think of it as a function is a value, you can do:

var myFunction = function() {
    alert("Hi");
}

or

function myFunction() {
    alert("hi");
}

And then:

$('#blah').on('click', myFunction); //Without invocation!

or using an anonymous function:

$('#blah').on('click', function() {
    alert("Hi");
});

answered Aug 31, 2016 at 9:44

Jorgeblom

3,6082 gold badges27 silver badges24 bronze badges

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

Comments

Sharfaraz Bheda · Accepted Answer · 2016-08-31 09:42:37Z

0

You can also use object of function :

var temp=function test() {
  alert('hi');
}
$('#blah').on('click', temp);

answered Aug 31, 2016 at 9:42

Sharfaraz Bheda

4571 gold badge7 silver badges24 bronze badges

Comments

Ranvir S. · Accepted Answer · 2016-08-31 09:46:39Z

0

Try :

$('#blah').on('click', test); // your function name only

Updated Fiddle

answered Aug 31, 2016 at 9:46

Ranvir S.

293 bronze badges

Collectives™ on Stack Overflow

Jquery Click-handler doesn't work with named function?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related