jQuery On <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文档的最佳位置.