I've been trying to figure out the relatively new (at least for me, I guess) `.on()` method provided with jQuery versions 1.7.x onwards. We've been using `live(), bind()` in our code to handle event handlers till now and we're thinking of an overhaul because of the [performance issues](http://paulirish.com/2010/on-jquery-live/) which `.live()` seems to have.
So here's my problem. This is the page structure I have in my page:

```
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer">
        <div id="default"></div>
        <div class="close">Close</div>
        <div id="extras">//some random stuff// </div> 
    </div>

```

I've created an object to store frequently used selectors to such as `$(document), $("#header"), $("#footer")` like this:

```
   var elements = {
        $doc: $(document),
        $foo: $("#footer"),
        $head: $("#header")
   };

```

The behavior expected from the click of `.close` inside `#footer` is that `#extras` must hide from view. I tried to bind the click event of `.close` to `#footer` (*delegated*) like this:

```
elements.$foo.on("click","div.close",hideFooter)

```

**WHICH DID NOT WORK**. But, if bound to `elements.$doc` like this:

```
elements.$doc.on("click", "div.close", hideFooter);

```

**IT WORKS**. But isn't this how `.live()` works? (If for every click it should to go to the DOM start and bubble down to `div.close`)

Am I doing something wrong here? 

**EXTRA INFO**
The contents of the anonymous function `hideFooter` are :

```
    function hideFooter(event) {
        $(event.currentTarget).next().hide("slow")
                              .closest("#footer").css({ "opacity": "0.8" });
        $("#default").show();
    }

```

**THE CODE SEQUENCE in default.js**

```
    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);

```