title: pass data back to a jQuery Plugin's caller element
body: <p>As an exercise in learning js, I am building a color picker plugin for jQuery. I have a bootstrap modal that is displayed (Click Me). When a color is selected in the modal I would like to set the button (the button that opened the modal) background to the button that was clicked in the modal. I can't figure out how to access the parent without resorting to using unique id's or any other bootstrap functionality.</p>
  
  <p>Here's what I have so far (sorry, couldnt get jsfiddle to load) plugin code:</p>
  
  <pre><code>(function( $ ) {
      "use strict";
  
      $.fn.colorpicker = function(options) {
  
  
          var opts = $.extend( {}, $.fn.colorpicker.defaults, options );
          var colorContainer = $('&lt;ul/&gt;').attr('id', 'container');
              $(opts.colors).each( function( index) {
                  colorContainer.append('&lt;button style="background-color: ' +this+ ' "&gt; &amp;nbsp; &lt;/button&gt;');
              });
  
          var $modalHtml = $('&lt;div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"&gt; '+
                              '&lt;div class="modal-dialog modal-sm"&gt;' +
                                  '&lt;div class="modal-content" id=modal-colors&gt; ' +
                                  '&lt;/div&gt; ' +
                              '&lt;/div&gt; ' +
                          '&lt;/div&gt;');
          $modalHtml.find('#modal-colors').append(colorContainer);
          $modalHtml.on('click', 'button' , function(){opts.onChanged($(this).attr('style'));})
          this.parent().append($modalHtml);
          return this.each(function(index){
              $(this).attr("id","color-picker-" + index);
              $(this).attr("data-toggle","modal");
              $(this).attr("data-target",".bs-example-modal-sm");
          });
      };
  
  
  
  
  }( jQuery ));
  
      $.fn.colorpicker.defaults = {
          colors : ["#000000", "#1A0000", "#330000", "#4C0000", "#660000", "#800000", "#990000"],
          onChanged: function(rgb){}
  };
  </code></pre>
  
  <p>and is called thus:</p>
  
  <pre><code> &lt;script type="text/javascript"&gt;
    $( ".colorpicker" ).colorpicker({onChanged:function(color){
        console.log(color)
      }});
  
    &lt;/script&gt;
  </code></pre>
  
  <p><a href="http://joe-riggs.com/color/" rel="nofollow">http://joe-riggs.com/color/</a></p>
  
  <p>Any other code criticisms welcome as well, thanks!</p>