选择元素未触发的on()方法

时间:2013-01-31 11:12:57

标签: javascript jquery

我正在使用jQuery 1.9.0,并且只要在select中更改选项,我就会尝试触发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

6 个答案:

答案 0 :(得分:6)

.on()方法允许您委托 DOM树上方的事件处理程序。我们的想法是将事件处理程序绑定到祖先元素,但只有在到达它的事件源自与选择器匹配的后代元素时才执行该处理程序。

在你的情况下,就是这样:

$(".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中,您可以直接绑定到它:

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

如果最初在DOM中,则必须委托更高(我在这里使用body作为示例。您应该尝试委托给最接近的人在加载时将在DOM中的祖先:

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

答案 1 :(得分:1)

$("option.option_exercise").on("change","option.option_exercise"应为$("select.select_exercise").on("change",function()

演示:Fiddle

答案 2 :(得分:1)

您可以尝试执行以下操作。

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

答案 3 :(得分:0)

你可以使用

$('.select_exercise').change(function() {
alert('Handler for .change() called.');
});

答案 4 :(得分:0)

确定

您需要检查select元素是否已更改,而不是选项之一。

在这个例子中,我正在检查是否已经更改了具有名为“select_exercise”的类的select元素。

我正在努力想要获得所选的选项,请查看此代码

$(".select_exercise").on("change",function()
{
    alert($(this).find(":selected").text()); --Get the selected option text
    alert("i am changing");
});

Fiddle Example

答案 5 :(得分:0)

这很好用:

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

选择是更改,而不是选项,因为它是更改选择的值,而不是选项。

相关问题