javascript - on() 方法与选择元素不触发

Question

我正在使用 jQuery 1.9.0 并且每当选择中的选项发生更改时我都会尝试触发 on() 方法。它与 live() 一起使用，但我认为它可能是我没有看到的简单内容。

这是我的 HTML:

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

和我的脚本:

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

这里是the fiddle

Answer 1

.on() 方法可以让您在 DOM 树上委托(delegate)一个事件处理程序。这个想法是将事件处理程序绑定(bind)到祖先元素，但仅当到达它的事件源自与选择器匹配的后代元素时才执行该处理程序。

就您而言，情况是这样的:

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

但是，根据您的示例代码，这将不起作用，因为 option 元素永远不会触发 change 事件(但 select 元素会触发) 。假设 select 元素从加载时起就位于 DOM 中，您可以直接绑定(bind)到它:

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

如果它最初不在 DOM 中，则您必须委托(delegate)更高层(我在这里使用 body 作为示例。您应该尝试委托(delegate)给加载时 DOM 中最接近的可能祖先):

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