Small Mistake When Simultaneously Binding Multiple Events With jQuery
Posted June 8, 2012 at 10:05 AM by Ben Nadel
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"...
@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
What about:
- function eventHandler(ev){
- //do cool stuff here
- }
- $(document).bind({
- open: eventHandler,
- close: eventHandler
- });
More verbose, but less error prone.
@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.
