Question

我有两个<select>元素：select.exerciseType和#moduleTopic，每个元素都有自己的处理程序包围document。我相信知道select.exerciseType是dinamic并且可能有多个这样的人很重要。他们的活动是：

$(document).ready(function() {
    $(document).on("change", $("select.exerciseType"), function(e) {
        <!--Code not really important-->
    }
    $(document).on("change", $("#moduleTopic"), function(e) {
        <!--Code not really important-->
    }
}

我的问题是，当我在其中一个选项中更改所选选项时，这两个事件都会被触发。为什么on（）函数中的选择器不起作用？如何使其起作用？

Answer 1

jQuery .on handler的语法为 .on( events [, selector ] [, data ], handler ) ，其中第二个参数为string

在你的情况下，由于它不是string，它被省略，event总是在到达所选元素时被触发！

$(document).ready(function() {
  $(document).on("change", "select.exerciseType", function(e) {});
  $(document).on("change", "#moduleTopic", function(e) {});
});

Answer 2

您可以改用此代码：

$("#moduleTopic").change(function() {
 // code executes here
});

编辑---

您可以使用类名并通过在函数内使用<select>来检测正在更改的$(this)。

Answer 3

您不需要document.ready，您也只需指定选择器，而不是检索它。即。

// class example
$(document).on("change", "select.exerciseType", function(e) {
    // Code not really important
});

// ID example
$(document).on("change", "#moduleTopic", function(e) {
    // Code not really important
});

关于错误元素的更改事件触发的JQuery

3 个答案: