jQuery On <select>更改事件未触发</select>

Question

标题中有以下内容：

$('body').on('change', '#userFilter', function(){
   console.log('changed');
});

单击选项卡时，此元素将动态插入页面：

<select id="userFilter">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

问题是当我更改下拉列表时，控制台中没有显示任何内容。

Answer 1

将其包裹在$(document).ready(function(){....})中，以便将html控件userFilter添加到DOM并可用于javascript

$(document).ready(function() {
   $('body').on('change', '#userFilter', function(){
      console.log('changed');
   });
});

  

传递给.ready（）的处理程序保证在执行之后执行   DOM准备好了，所以这通常是附加所有其他内容的最佳位置   事件处理程序并运行其他jQuery代码jQuery docs。

Answer 2

虽然与OQ有点无关，但是如果你因为你的选择没有解雇而来到这里，请确保在之前的时间你没有检查＆＃34;阻止此页面显示...＆ ＃34;在alert()。您需要关闭该标签并重新打开该网址，以便再次触发该标记。