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.


 

And the code in action:
DEMO

,