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 jQuery language framework? 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.