blog.gatherage.com

After using the jQuery "live" function for a few months, I realized it'd be nifty to use switch in the event handler. Yes, this could be handled by a huge "if" statement, but don't you think you deserve something a little more elegant? Here's an example that extends the jQuery object.

<!-- HTML code -->
<div class="actionBar">
	<img src="images/pencil.png" alt="Edit" />
	<img src="images/cut.png" alt="Cut" />
	<img src="images/delete.png" alt="Delete" />
</div>

// Javascript code

// Extend the jQuery object with our own custom "selectorSwitch" function
jQuery.fn.selectorSwitch = function(args) {
	var val = this;
	for (var selector in args) {
		if (this.is(selector)) {
			val = args[selector].call(this);
			break;
		}
	}
	return val;
};

// Now we bind an event delegation listener. When it's triggered, we use our new function to compare the clicked element against a list of selectors. When the function finds a selector that matches our clicked element, it runs the associated code.
$(".actionBar img").live("click", function() {
	$(this).selectorSwitch({
		"img[alt='Edit']": function() {
			// Handle an "edit" action
		},
		"img[alt='Cut']": function() {
			// Handle a "delete" action
		},
		"img[alt='Delete']": function() {
			// Handle a "delete" action
		}
	});
});

A demo is available here. And remember, always use an event context when possible.