Small Mistake When Simultaneously Binding Multiple Events With jQuery

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.