jQuery .click( foo() ) 意外行为

Question

Today I came across a bug in my web app regarding form search submit function (in js) and a button click action in jQuery.

I have a form that has the action submitEmpSearch() attached to it. This is embedded in the html of the form as it's onSubmit action. There is also a search button associated with the form with an onclick event submitEmpSearch() . I was making an attempt to clear out embedded javascript from the templates in favor of jQuery calls. In an included jQuery call I had the call $('#search-button').click( submitEmpSearch() ) inside my $(document).ready group.

From my previous experience with the .click() function, I expected this to have the same functionality as the embedded onclick attribute provided. However, instead, it gave the page an infinite loop of (apparently) clicking the button as soon as it loaded!

Now, previously, I always passed a function() {} pattern. I had never passed in a predefined function before. Is this some kind of gotcha in the jQuerylanguageframework? Or is there something else I'm doing wrong?

Answer 1

jQuery is not a language. JavaScript is the language. You're passing the result of the function, when you want to pass the function itself:

It should be:

$('#search-button').click(submitEmpSearch)

In JavaScript, functions can be passed as values. However, submitEmpSearch() is the return value of a call to the function, as one would expect from other languages.

Answer 2

Instead of

$('search-button').click( submitEmpSearch() )

use just

$('#search-button').click( submitEmpSearch )

or

$('#search-button').click( function(){submitEmpSearch();} )

Also if the 'search-button' is a class you have to add a "." (dot) before it. If it is an id you have to add "#". See my examples.

Answer 3

Aha!

You should pass the function by reference, not call the function and pass its result:

function handler(){
    // ...
}
jQuery('.something').click(handler()); // <- wrong
jQuery('.something').click( handler ); // <- right

Answer 4

Change from:

$('search-button').click(submitEmpSearch())

to:

$('search-button').click(submitEmpSearch)

This way instead of executing submitEmpSearch() and passing its return value to the click(), you're passing the delegate to the click().

Answer 5

Try this.

$('#search-button').click(function(){
    submitEmpSearch();
});