2

我正在使用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");
});

这是小提琴

4

6 回答 6

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");
});
于 2013-01-31T11:16:27.103 回答
1

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

演示：小提琴

于 2013-01-31T11:15:14.593 回答
1

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

$(".select_exercise").change(function()
{
    alert("i am changing");
});
于 2013-01-31T11:16:39.957 回答
0

您可以使用

$('.select_exercise').change(function() {
alert('Handler for .change() called.');
});
于 2013-01-31T11:17:29.340 回答
0

行

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

在此示例中，我正在检查具有名为“select_exercise”的类的选择元素是否已更改。

我猜你想得到选定的选项，所以看看这段代码

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

小提琴示例

于 2013-01-31T11:17:45.790 回答
0

这工作正常：

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

改变的是选择，而不是选项，因为改变的是选择的值，而不是选项。

于 2013-01-31T11:18:03.473 回答