Images in this post missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at
jQuery Gotcha - Functions in Events

I just spent way too long wondering why my silly page kept refreshing itself, one of the forms on the page was submitting itself over and over ... I had been refactoring some Javascipt to allow me to use it generically across pages.

My orginal code to bind an ajax call to the submit of the form was as follows:

$("#SearchForm").submit(function() { ... previous ajax code inline here ... ; return false; });

And all was fine ... except I wanted to reuse the inline code, so I put it into a function:

$("#SearchForm").submit(GetTableContent(controller, displaySelect));

And suddenly the page started refreshing automatically, making debugging it rather hard to even find the mistake. After 20 mins scanning through the jQuery documentation on form submit I noticed that "submit()" reads "Trigger the submit event of each matched element" but that "submit(fn)" reads "Bind a function to the submit event of each matched element" ... clearly the first version was being used by jQuery, where as my code should have been the second one - after all I had a function in there now?

Then I twigged it, the jQuery (fn) wants a plain basic function with no parameters ... so a quick change wrap my new function with a parameterless function resolved the problem:

$("#SearchForm").submit(function() { GetTableContent(controller, displaySelect); return false; });

Annoying ... I hate wasting 20 mins on silly things like this ...


Posted 10-09-2008 11:43 AM by Jak Charlton
Filed under:



sergiopereira wrote re: jQuery Gotcha - Functions in Events
on 10-09-2008 9:18 AM

Casey, there's nothing wrong with the docs. The syntax you tried at first has a problem that may not be apparent at first. Since the submit(fn) method expects a Function, GetTableContent(a, b) has to *return* a function. You're actually invoking GetTableContent in that line, not passing the function itself. You can get around that by doing what you did or create a function that produces the needed function (so many functions, right?)

//I'm assuming GetTableContent returns false.

function createHandler(p1, p2){

return function() {

return GetTableContent(p1, p2);



and use it

$('#SearchForm').submit(createHandler(controller, displaySelect));

Jak Charlton wrote re: jQuery Gotcha - Functions in Events
on 10-09-2008 11:07 AM

Cheers Sergio ... I didn't think there was anything wrong with the docs ... just my understanding of what (fn) meant in that context ... of course it makes sense when you read closely, but I'm a C# developer at heart and used to having strong typing to stop me doing silly things like this :)

The alternative syntax is probably a little messier ... but useful to know about ...

Little by little I'm kicking JQuery into line, occassionaly it kicks me back ... brilliant though JQuery is, VS sucks for JS work ...

Ben Scheirman wrote re: jQuery Gotcha - Functions in Events
on 10-22-2008 1:42 PM

C# would have done the same thing.  You aren't deferring execution of a function when you call it.  You're calling it right there, and it takes the return value and stuffs it in the .submit( ).

It's an easy mistake though, I've done it before too.

About The CodeBetter.Com Blog Network
CodeBetter.Com FAQ

Our Mission

Advertisers should contact Brendan

Google Reader or Homepage Latest Items
Add to My Yahoo!
Subscribe with Bloglines
Subscribe in NewsGator Online
Subscribe with myFeedster
Add to My AOL
Furl Latest Items
Subscribe in Rojo

Member Projects
DimeCasts.Net - Derik Whittaker

Friends of
Red-Gate Tools For SQL and .NET


SmartInspect .NET Logging
NGEDIT: ViEmu and Codekana
NHibernate Profiler
Balsamiq Mockups
JetBrains - ReSharper
Web Sequence Diagrams
Ducksboard<-- NEW Friend!


Site Copyright © 2007 CodeBetter.Com
Content Copyright Individual Bloggers


Community Server (Commercial Edition)