title: .on() in jQuery not working for delegated events
body: <p>I've been trying to figure out the relatively new (at least for me, I guess) <code>.on()</code> method provided with jQuery versions 1.7.x onwards. We've been using <code>live(), bind()</code> in our code to handle event handlers till now and we're thinking of an overhaul because of the <a href="http://paulirish.com/2010/on-jquery-live/" rel="nofollow">performance issues</a> which <code>.live()</code> seems to have.
  So here's my problem. This is the page structure I have in my page:</p>
  
  <pre><code>    &lt;div id="header"&gt;&lt;/div&gt;
      &lt;div id="content"&gt;&lt;/div&gt;
      &lt;div id="footer"&gt;
          &lt;div id="default"&gt;&lt;/div&gt;
          &lt;div class="close"&gt;Close&lt;/div&gt;
          &lt;div id="extras"&gt;//some random stuff// &lt;/div&gt; 
      &lt;/div&gt;
  </code></pre>
  
  <p>I've created an object to store frequently used selectors to such as <code>$(document), $("#header"), $("#footer")</code> like this:</p>
  
  <pre><code>   var elements = {
          $doc: $(document),
          $foo: $("#footer"),
          $head: $("#header")
     };
  </code></pre>
  
  <p>The behavior expected from the click of <code>.close</code> inside <code>#footer</code> is that <code>#extras</code> must hide from view. I tried to bind the click event of <code>.close</code> to <code>#footer</code> (<em>delegated</em>) like this:</p>
  
  <pre><code>elements.$foo.on("click","div.close",hideFooter)
  </code></pre>
  
  <p><strong>WHICH DID NOT WORK</strong>. But, if bound to <code>elements.$doc</code> like this:</p>
  
  <pre><code>elements.$doc.on("click", "div.close", hideFooter);
  </code></pre>
  
  <p><strong>IT WORKS</strong>. But isn't this how <code>.live()</code> works? (If for every click it should to go to the DOM start and bubble down to <code>div.close</code>)</p>
  
  <p>Am I doing something wrong here? </p>
  
  <p><strong>EXTRA INFO</strong>
  The contents of the anonymous function <code>hideFooter</code> are :</p>
  
  <pre><code>    function hideFooter(event) {
          $(event.currentTarget).next().hide("slow")
                                .closest("#footer").css({ "opacity": "0.8" });
          $("#default").show();
      }
  </code></pre>
  
  <p><strong>THE CODE SEQUENCE in default.js</strong></p>
  
  <pre><code>    var elements = {
              $doc: $(document),
              $foo: $("#footer"),
              $head: $("#header")
         };
  
    elements.$doc
         .ready(function () {
           elements.$foo.on(events.click, "div.close", hideFooter);
         })
        .on(events.click, "#content", HideHeaderFooter)
        .on(events.hover, "#footer", showFooter);
  </code></pre>