Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at CFUNITED 2009 (Lansdowne, VA) with:

Small Mistake When Simultaneously Binding Multiple Events With jQuery

By Ben Nadel on

For some reason, on my latest project, I keep making a mistake when simultaneously binding multiple events on a given jQuery collection. The annoying part of the mistake is that it's not terribly easy to track down as it doesn't throw an error - it simply "fails" silently. To demonstrate, here's the kind of code that I keep writing:

  • <!doctype>
  • <html>
  • <head>
  • <title>Event Binding / Unbind Mistake</title>
  • <script type="text/javascript" src="./jquery-1.7.1.js"></script>
  • <script type="text/javascript">
  •  
  •  
  • // WRONG: Bind two different events.
  • $( document ).bind(
  • "open, close",
  • function( event ){
  •  
  • console.log( "Triggered: " + event.type );
  •  
  • }
  • );
  •  
  • // Trigger both events.
  • $( document ).triggerHandler( "open" );
  • $( document ).triggerHandler( "close" );
  •  
  •  
  • </script>
  • </head>
  • <body>
  • <!-- Left intentionally blank. -->
  • </body>
  • </html>

As you can see, I am attempting to bind both the "open" and "close" event types to the same handler. And, when I run the above code, I get the following output:

Triggered: close

There were no errors; but, only one of the events was captured. The reason for this - the error that I keep making - is the way I am listing my event types:

"open, close"

See the problem? It's the comma! jQuery expects a space-delimited list of event types. So, when it parses the input, it sees the following two events:

  • open,
  • close

Notice that the "," is actually part of the first event type. Removing the comma and everything works perfectly.

Now, if only I can get this irksome habit out of my head!




Reader Comments

I agree that that is counter-intuitive, especially since a list of multiple selectors is comma-delimited. Seems to be inconsistent.

"bind" is deprecated in favor of "on", but "on" uses that same syntax.

$( document ).on("open close"...

Reply to this Comment

@Joel,

I use on() when I can, but the project where this keeps popping up is using an older version of jQuery. Soon to be updated. Hopefully now that I've put it on paper, it'll get out of my head :D

Reply to this Comment

What about:

  • function eventHandler(ev){
  • //do cool stuff here
  • }
  • $(document).bind({
  • open: eventHandler,
  • close: eventHandler
  • });

More verbose, but less error prone.

Reply to this Comment

@Sergio,

Good point. I have not yet gotten used to the hash-based configuration for functions in the newer jQuery releases (ex. multi-bindings, defining attributes of a new DOM element).

I think I need to go back through the jQuery API and really learn the new variations of the method calls.

Reply to this Comment

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.