Why does click event handler fire immediately upon page load?

Question

I playing around with a function that I want to bind to all the links. At the present the function fires when the page loads, instead of when I click on the link.

Here's my code. (I can post the function showDiv(), if you need to see it.) Can you tell if I'm doing something wrong or stupid here?

$(document).ready(function(){      $('a.test').bind("click", showDiv());  }); 

Thanks!

Answer 1

You want to pass a reference to a function as a callback, and not the result of function execution:

showDiv() returns some value; if no return statement was used, undefined is returned.

showDiv is a reference to the function that should be executed.

This should work:

$(document).ready(function() {   $('a.test').on("click", showDiv); // jQuery 1.7 and higher   $('a.test').bind("click", showDiv); // jQuery 1.6 and lower }); 

Alternatively, you could use an anonymous function to perform a more advanced function:

// jQuery 1.7 and higher el.on('click', function() {   foo.showDiv(a, b, c);   // more code... });  // jQuery 1.6 and lower el.bind('click', function() {   foo.showDiv(a, b, c);   // more code... }); 

In some circumstances you may want to use the value returned by a function as a callback:

function function foo(which) {   function bar() {     console.log('so very true');   }    function baz() {     console.log('no way!');   }    return which ? bar : baz; }  el.click(foo(fizz)); 

In this example, foo is evaluated using fizz and returns a function that will be assigned as the callback for the click event.