Question

I’m using jQuery 1.9.0 and I’m trying to trigger the on() method whenever an option is changed inside a select. It worked with live() but I think its probably something simple that I’m not seeing.

This is my HTML:

<select class="select_exercise">
    <option class="option_exercise">Example 1</option>
    <option class="option_exercise">Example 2</option>
</select>

and my Script:

$("option.option_exercise").on("change","option.option_exercise",function()
{
    alert("i am changing");
});

Here is the fiddle

Answer 1

The .on() method lets you delegate an event handler higher up the DOM tree. The idea is that you bind an event handler to an ancestor element, but only execute that handler when the event that has reached it originated on a descendant element matching the selector.

In your case, that would be this:

$(".select_exercise").on("change", ".option_exercise", function () {
// ^---- Probably no need to qualify the selectors with a tag name
    alert("i am changing");
});

However, given your example code, this will not work since option elements will never fire change events (the select element will though). Assuming the select element is in the DOM from the time it loads, you can bind directly to it:

$(".select_exercise").on("change", function () {
    alert("i am changing");
});

And if it’s not in the DOM initially, you’ll have to delegate higher (I’m using body here as an example. You should try and delegate to the closest possible ancestory that will be in the DOM at load):

$("body").on("change", ".select_exercise", function () {
    alert("i am changing");
});