Adding a function to one jQuery/DOM element
<p>I am authoring a plugin which instantiates a map. The map would then provide a function to move to another place on the earth.</p>

<p>The script makes the map just fine. However I can't "tack" the function on the element, to be used by another plugin in a callback.</p>

<p>Here's the approach I tried; in plugin:</p>

<pre><code>(function($){
  $.fn.mapDo(options){
    map = new BlahMap(this.get(0));

    this.moveTheMap = function(place){
      map.moveItToThat(place);
    }; // nope.
  }
})(jQuery);
</code></pre>

<p>Then, in view:</p>

<pre><code>$(map).mapDo();

$(otherElement).otherControl({
  callback: function(place){
    $(map).moveTheMap(place); // moveTheMap is not there on $(map)!
  }
};
</code></pre>

<h3>The Question</h3>

<p>How do I add a function to the map jQuery or DOM element, if possible? If not, how can I provide that kind of functionality?</p>

<p>More importantly, am I going the right way here by separating the things that way? I'm a bit of a neophyte to Javascript, how are these tasks usually done while still keeping the components apart?</p>

<p>While that's the stab I took at it, more generally, I struggled with the concept of outputting things from a jQuery plugin while maintaining chainability. In this case, what I am trying to do is to <strong>output</strong> a callback from the plugin that will work on the called element later in the execution.</p>
