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