Why does click event handler fire immediately upon page load?

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.

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

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

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

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