无法使用jQuery注册HTML选择的更改事件处理程序

Question

我希望JavaScript函数可以在用户从菜单中选择项目时接收控制。 这是我的实验代码（有关HTML的摘录）：

<script>
$(function() {

    $(".myselect").on("change", "select", function() {
        console.log("TODO");
    });
});
</script>

<!-- ... -->

<form method="post" action="">
<select class="myselect">
<option value="A">A</option>
<option value="B">B</option>
</select>
</form>

谁知道这里可能出什么问题？ （此时，永远不会调用事件处理程序。）

Answer 1

您使用的是委托处理程序，但是主要选择器和次要选择器是相同的元素，因此它将不起作用。 如果需要委托的事件处理程序（因为在onload触发后将select元素添加到DOM中），则需要将主选择器设置为静态父元素，如下所示：

$(document).on('change', '.myselect', function() {
    console.log('TODO');
});

否则，您可以使用标准事件处理程序：

$('.myselect').change(function() {
    console.log('TODO');
});

Answer 2

小提琴你可以试试看。

$(".myselect").change( function() {
    alert("TODO");
});

另一个例子

$(document).on("change", ".myselect", function() {
    alert("TODO");
});

Answer 3

您也可以尝试以下一种方法：如果要获取值：

$('.myselect').on('change', function(){
    var value = this.value;
    alert(value);
});

http://jsfiddle.net/hxzonx82/1/