Small Mistake When Simultaneously Binding Multiple Events With jQuery

By Ben Nadel

Published 2012-06-08 in JavaScript / DHTML — Comments (4)

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!

Want to use code from this post? Check out the license.

Short link: https://bennadel.com/2386

Reader Comments

Joel Cox Jun 8, 2012 at 11:10 AM

10 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"...

Ben Nadel Jun 8, 2012 at 11:12 AM

15,902 Comments

@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

Sergio Medina Jun 8, 2012 at 2:59 PM

1 Comments

What about:

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

More verbose, but less error prone.

Ben Nadel Jul 2, 2012 at 9:41 AM

15,902 Comments

@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.

Oh my chickens, this post is old!

Hit me up on Twitter if you want to discuss it further.