jQuery .on() not firing event handler
===

### Scenario

I have a list of users, within each list item is a `<header>` and a `<div>` wrapper - they are siblings:

    <li class="user">
        <header>
            // ...
        </header>
        <div class="user-wrapper">
            // ...
        </div>
    </li>

I am toggling the `div` wrapper when the user `header` is clicked.


### What currently works:

    // the handler is called
    $('li.user > header').live('click', function () {
        $(this).next('.user-wrapper').toggle();
    });

As `live()` has been deprecated and *I am* using jQuery 1.7.2, I want to use `on()`.

### What does not work:


    // Direct style
    $('li.user > header').on('click', function () {
        $(this).next('.user-wrapper').toggle();
    });

    // Delegated style
    $('li.user').on('click', 'header', function () {
        $(this).next('.user-wrapper').toggle();
    });

In either `on()` scenario, the anonymous handler function is not being called. 

### Question

First... why is `on()` choking?

Second... if/when it works, using the delegate style, can i still reference the header's sibling div in the same manner as above?
