I have a field that is brought in via an AJAX call:

```
<select id="selection">
    <option value="foo">bar</option>
    <option value="baz">bat</option>
</select>

```

I'm trying to use `.on()` to pass the selected element to a function when the field is changed:

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

function doStuff(selection)
{
    alert(selection.text());
}

```

When the element changes, I only receive a blank alert dialogue. Placing a breakpoint on `alert(selection.text()` gives me:

```
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]

```

And one of the `HTMLOptionElements` 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 `.on()`.

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