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.

H

Answer 1

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

Answer 2

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 3

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.

Answer 4

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

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