Posted: March 5th, 2013 | Author: jriggs | Filed under: html, jQuery | Tags: web | No Comments »
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
Posted: March 5th, 2013 | Author: jriggs | Filed under: html, javascript, jQuery | No Comments »
I needed a lightweight color picker that was reusable, lightweight, dead simple to implement, and could be attached to any html element. Here’s what I came up with:
DEMO