How to get the :selected form <option> when using .on()?
<p>I have a  field that is brought in via an AJAX call:</p>

<pre><code>&lt;select id="selection"&gt;
    &lt;option value="foo"&gt;bar&lt;/option&gt;
    &lt;option value="baz"&gt;bat&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>I'm trying to use <code>.on()</code> to pass the selected element to a function when the field is changed:</p>

<pre><code>$(document).on("change", "#selection", function(){ doStuff(jQuery(this).filter("option:selected")); });

function doStuff(selection)
{
    alert(selection.text());
}
</code></pre>

<p>When the element changes, I only receive a blank alert dialogue. Placing a breakpoint on <code>alert(selection.text()</code> gives me:</p>

<pre><code>selection: e.fn.e.init[0]
    context: HTMLSelectElement
        0: HTMLOptionElement
        1: HTMLOptionElement
    length: 0
    prevObject: e.fn.e.init[1]
    selector: ".filter(option:selected)"
    __proto__: Object[0]
</code></pre>

<p>And one of the <code>HTMLOptionElements</code> will have a selected: true value. I just don't know how to get the text (bar or bat in my example) from the selected element, using <code>.on()</code>.</p>

<p>I would normally do <code>$('#selection option:selected').text();</code>, but .on() is playing all sorts of games on me :(</p>
