Why does click event handler fire immediately upon

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 past in 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

Looks like you're calling the function showDiv directly there (and binding the return result of showDiv() to the click handler instead of binding it directly.

You want something like

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

Answer 2

Change it to: $('a.test').bind("click", showDiv); (do not put parens around showDiv since you want to pass the function reference).

Answer 3

Use the below line. showDiv() will call the function rigth away when that line is executed.

$('a.test').bind("click", showDiv);

Answer 4

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.