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').bind("click", showDiv);
});

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

...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;
}

...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.