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.

Leave a Comment