jQuery .On Pass Sender Information to Handler Function

I needed to display a modal box that would pass information back to the link (sender) that was clicked. In my experience this has been handled in the past by either:

1) Creating an individual modal box for each element that would need to one, and display it when the link is clicked
2) Using a generic object to pass data back and forth from the modal to the sender

I didn’t really like either of these approaches from an efficiency/readability standpoint. Fortunately, jQuery 1.7 introduced the .On function which allows you to delegate events to their respective handlers.

My scenario is a color-picker. I only have one instance of the palette (modal) which handles all requests from senders. Here’s the code block that accomplishes everything.

 
<script type="text/javascript">
$(document).ready(function() { 
 
	$(".show").click(function(e) {
		//remove binding (off) first before binding to prevent handler from being called more than once
			$('div').off('click').on('click','a',e.target, function(e){
				//e.target passed as a parameter to handler function
				//tells us which link was clicked 
				//and which is the owner we want to update
				var sender_id = e.data.id;
				//this e.target refers to the ahref that was clicked in the div
				var color_selected = $(e.target).attr('title');
				$("#" + sender_id).css({color: color_selected }); 
		});
	return false;
	});
 
});
</script>

And the code in action:
DEMO