jQuery: Chaining on() when using delgation
<p>In the old days, I used to chain calls to <code>live()</code> with great success, e.g.:</p>

<pre><code>$(".something")
    .live("click", function(e) { ... })
    .live("change", function(e) { ... })
    .live("submit", function(e) { ... });
</code></pre>

<p>These days, <code>live()</code>, <code>bind()</code> and <code>delegate()</code> have been superseded by the shiny new <code>on()</code>. </p>

<p>I've tried simply replacing <code>live()</code> with <code>on()</code> which would seem obvious:</p>

<pre><code>$(".something")
    .on("click", function(e) { ... })
    .on("change", function(e) { ... })
    .on("submit", function(e) { ... });
</code></pre>

<p>However, it's almost as obvious that this won't work when you consider how <code>on()</code> works. This from <a href="http://api.jquery.com/on/">http://api.jquery.com/on/</a>:</p>

<blockquote>
  <p>"Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on()."</p>
</blockquote>

<p>According to the jQuery docs, I need to bind to <code>document</code> and delegate to <code>.something</code> to handle live events. Unfortunately, this means I end up repeating my delegate selector (<code>.document</code>) if I want to replicate what I have above with <code>on()</code>:</p>

<pre><code>$(document)
    .on("click", ".something", function(e) { ... })
    .on("change", ".something", function(e) { ... })
    .on("submit", ".something", function(e) { ... });
</code></pre>

<p>This works as expected but I'd really love to be able to chain more clearly like I do using <code>live()</code>. Am I missing something?</p>
