Skip to main content
Ben Nadel at dev.Objective() 2015 (Bloomington, MN) with: Kitt Hodsden
Ben Nadel at dev.Objective() 2015 (Bloomington, MN) with: Kitt Hodsden ( @kitt )

Small Mistake When Simultaneously Binding Multiple Events With jQuery

By 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:

	<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" );

	<!-- Left intentionally blank. -->

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.

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



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
	open: eventHandler,
	close: eventHandler

More verbose, but less error prone.



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.

I believe in love. I believe in compassion. I believe in human rights. I believe that we can afford to give more of these gifts to the world around us because it costs us nothing to be decent and kind and understanding. And, I want you to know that when you land on this site, you are accepted for who you are, no matter how you identify, what truths you live, or whatever kind of goofy shit makes you feel alive! Rock on with your bad self!
Ben Nadel