How to reference original bound element in plugin callback?

How to reference original bound element in plugin callback?

I have plugin that simply opens a modal box and allows users to select a value form a picklist. The plugin attaches an event listen to open the select/modal box. This selected value will then be returned to a callback function. In this call back I would also like to reference the actual element the plugin was bound to but I am not sure how to do this. In the code see this section: "//************How do I "


This is one of my first plugins so if there is a better way to do this please let me know. 


Thanks,

Jason


Here is the code on jsBin: http://jsbin.com/welcome/70094/edit


Also here is the code:

  2. <html>
  3. <body>
  4. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

  6. <!-- plugin -->
  7. <script>
  8. (function( $ ){
  9. $.fn.pillSelector = function( options ) {  
  11. // Create some defaults
  12. var settings = $.extend( {
  13. 'onSelect' : function(){}
  14. }, options);
  16. //Create event lister for select button when user selects value form a list
  17. $('#selectBtn').click(function(){
  18. //Return the selected value to the call back function
  19. settings.onSelect( $('#selectList').find('option:selected').val() );
  21. //Hide the select box / fake modal box
  22. $('#selectBox').hide();
  23. });
  25. //For each element this plugin is attached to create event that will open selector box
  26. return this.each(function() {        
  28. //Add event listen that will open select box
  29. $(this).bind('click',function(){
  30. $('#selectBox').show();
  31. });
  33. });
  34. };
  35. })( jQuery );
  36. </script>
  38. <!-- user script -->
  39. <script>
  40. $(document).ready(function(){
  41. $('.openSelector').pillSelector({
  42. onSelect : function(color){
  43. console.log(color + ' selected');
  45. //************How do I reference the original .openSelector element this plugin was bound to?
  46. console.log($(this));
  47. console.log(this);
  49. //Do I need to some how store it in the plugin and return it in the function?
  50. }
  51. });
  52. });
  53. </script>
  55. <a href="#" id="select1" class="openSelector">open selector</a>
  57. <a href="#" id="select2" class="openSelector">open selector</a>
  59. <!-- pretend this is some kind of modal box -->
  60. <div id="selectBox" style="display: none;">
  61. <select id="selectList">
  62. <option value="red">red pill</option>
  63. <option value="blue">blue pill</option>
  64. </select>
  66. <input type="button" id="selectBtn" value="this would select something"/>
  67. </div>
  69. </body>
  70. </html>