title: How jquery widgets keep track of the initial jquery object? (an event case scenario)
body: <p>I'll try to be as simple as I can be:</p>
  
  <p>I wrote a jquery widget with the help of <strong>jqueryui</strong> (go to themeroller, download a theme, unzip it and there at the <code>development-bundle</code> folder you'll find a folder called <code>ui</code>, then include only the <code>jquery.ui.widget.js</code> for this example to run):</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset=utf-8&gt;
  &lt;title&gt;jQuery widget construction &amp; Events&lt;/title&gt;
  &lt;style&gt;
    h1 {
       color: #808080;
    }
    h1:hover {
       color: #000000;
       text-decoration: none;
       cursor: pointer;
    }
    a {
       color: #808080;
       background-color: #CCFF33;
    }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;h1&gt;Click Me&lt;/h1&gt;
  
  &lt;div class=content&gt;
  &lt;p&gt;
  &lt;a href="http://speckyboy.com/2010/01/20/25-tutorials-and-resources-for-learning-jquery-ui/"&gt;spekyboy&lt;/a&gt;
  &lt;/p&gt;
  &lt;p&gt;
  &lt;a href="http://www.learningjquery.com/"&gt;learning jquery&lt;/a&gt;
  &lt;/p&gt;    
  &lt;/div&gt;
  
  &lt;script src="../jquery-1.7.1.js"&gt;&lt;/script&gt;
  &lt;script src="../jquery.ui.widget.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  ////////////////////////Plugin Creation (Widget Factory)////////////////////////
  ///////////////////////////mycompany.linkLocation///////////////////////////////
  (function( $ ) {
  //1. use jQuery.widget() method, the Widget factory, to create plugins
  //--------------------------------------------------------------------
  $.widget( "mycompany.linkLocation", {
    //2. widget properties "foreground" and "background" (see docs)
    //-------------------------------------------------------------
    options: {
       color: "black",
       "background-color": "transparent",
       done: false,
       //3. a callback from the relevant widget event: linkLocation_onapply (see docs)
       //-----------------------------------------------------------------------------
       //where does this refers to (???)
       //evt refers to the custom jquery event object
       _onapply: function(evt, options){
          var attrs='';
          for(prop in this)
             attrs+=prop+', ';
          alert('from _onapply, this:\n'+attrs);
          attrs='';
          for(prop in evt)
             attrs+=prop+'='+evt[prop]+'\n';
          alert('from _onapply 1st arg, evt:\n'+attrs);
          //4. where is the reference to widget linkLocation for evt.target?
          //----------------------------------------------------------------
          $(evt.target).css(options);
       }
    },
    //5. used during construction by the Widget Factory (see docs)
    //------------------------------------------------------------
    //this refers to the object built by the Widget Factory
    _create: function() {
    },
    //6. used after initialization (see docs)
    //---------------------------------------
    //called as $("selector").widgetname("option", option_object)
    //or,
    //$("selector").widgetname("option", "key", "value")
    //this refers to the object built by the Widget Factory
     _setOption: function(key, value){
       this.options[ key ] = value;
    },
    //7. public method apply()
    //------------------------
    //this refers to the object built by the Widget Factory
    apply: function(evt){
       if(!this.options.done){
          //create a jquery object that wraps a specific dom element accessed
          //through the this.element provided by the Widget Factory
          var $this = $(this.element);
          this._css($this);
          ////////////////////////////////////////////////////////////////////////////
          //8. maybe one reason we done all these: add memory and execute only once!//
          ////////////////////////////////////////////////////////////////////////////
          //--------------------------------------------------------------------------
          this.options.done = true;
          //9. if apply() is called once then, _onapply() is called once
          //------------------------------------------------------------
          //event linkLocation_onapply will trigger method _onapply(), see docs
          this._trigger("_onapply", evt, {color: "white", "background-color": "purple"});
       }
    },
    //10. a private method _css()
    //--------------------------
    //this refers to the object built by the Widget Factory
    _css: function($elem){
       $elem.css({
          "background-color": this.options.background,
          "color": this.options.foreground
       });
    }
  });
  }( jQuery ));
  //11. user overwites public property: this.options
  //------------------------------------------------
  //for the objects created by the Widget Factory
  var options2 = {
     color: "blue",
     "background-color": "yellow"
  };
  //12. construct an object for every &lt;a&gt; element using the Widget Factory
  $( "a" ).linkLocation(options2);
  //13. call widget apply() methods
  //-------------------------------
  $('h1').on('click', function(evt) {
     //14. the jquery $(h1) object
     var attrs='';
     for(prop in this)
        attrs+=prop+', ';
     alert('From h1 tag onclick event, this:\n'+attrs);
     $( "a" ).linkLocation("apply").on("linklocation_onapply", 
        //15. never executed???
        function(evt, data){
           attrs='';
           for(prop in data)
              attrs+=prop+': '+data[prop]+'\n';
           alert('From linklocation_onapply event function, data:\n'+attrs);
        }
     );
  });
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>(please see my numbers in the code comments)
  now, all we do is create <strong><em>(12)</em></strong> a widget with some options <strong><em>(2)</em></strong>, that do nothing <strong><em>(5)</em></strong>. User can change the default options during construction <strong><em>(11)</em></strong>.
  User can call public method <code>apply()</code> <strong><em>(7)</em></strong> to change anchor foreground-background colors based on widget options but we also wanted to define a callback that will be triggered on a custom jquery event <strong><em>(9)</em></strong>.</p>
  
  <p>Every time user clicks on h1 tag <strong><em>(13)</em></strong> method <code>apply()</code> <strong><em>(7)</em></strong> is executed from every widget called <code>linkLocation</code> and attached to anchor elements <strong><em>(12)</em></strong>  BUT only once (we put code inside an if..else). As we said, method <code>apply()</code> changes anchor colors and triggers the callback function.</p>
  
  <h2>My questions:</h2>
  
  <p>a) is <code>this</code> at callback <code>_onapply()</code> <strong><em>(3)</em></strong> the <strong>jquery object that actually call my widget's public method</strong> as we can see in the messages from comment <strong><em>(14)</em></strong>?
  The messages are:</p>
  
  <pre><code>From h1 tag onclick event, this:
  jQuery17102845835909852654, align, click, focus, blur, title, lang, dir, dataset, 
  itemScope, itemType, itemId, itemRef, itemProp, properties, itemValue, hidden, 
  tabIndex, accessKey, ...
  </code></pre>
  
  <p>followed by our widget messages:</p>
  
  <pre><code>from _onapply, this:
  jQuery17102845835909852654, toString, href, target, download, ping, rel, hreflang, 
  type, text, coords, charset, name, rev, shape, protocol, host, hostname ...
  </code></pre>
  
  <p>and</p>
  
  <pre><code>from _onapply 1st arg, evt:
  type=linklocation_onapply
  timeStamp=1382545296011
  jQuery17102845835909852654=true
  ...
  </code></pre>
  
  <p>if you compare you'll find that <code>_onapply</code> has extra properties-<strong>why is this so</strong>?</p>
  
  <pre><code>toString, href, target, download, ping, rel, hreflang, type, text, coords, charset,
  name, rev, shape, protocol, host, hostname, port, pathname, search, hash
  </code></pre>
  
  <p>b) why is my event handler at comment <strong><em>(15)</em></strong> never been executed?</p>
  
  <p>c) what's this always changing property <code>jQueryn</code> where n=number at the jquery object properties?
  It seems that jquery isn't a singleton object and that seems to bahave bandly when we want to have memory on dom element statuses as in the case of the widget objects; they are stored in a jquery object but which one when it is constantly cloning itself?</p>
  
  <p>and d) as you can see at comment <strong><em>(4)</em></strong>, where is a reference to my widget <code>linkLocation</code> for the specific element that triggers my custom event?</p>
  
  <p>Really, can't find the abstraction that the library promishes....keep on searching the source code for answers...
  Thanks.</p>