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

【问题标题】：jQuery On <select> Change Event Not FiringjQuery On <select> 更改事件未触发
【发布时间】：2012-08-09 14:43:35
【问题描述】：

我在标题中有以下内容：

$('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>

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

【问题讨论】：

对我来说很好用：jsfiddle.net/KhY8s。确保在body 存在时绑定事件处理程序（jQuery 101）。来自jQuery tutorial：“由于我们在使用 jQuery 时所做的几乎所有事情都会读取或操作文档对象模型 (DOM)，因此我们需要确保在 DOM 准备好后立即开始添加事件等。这样做，我们为文档注册一个就绪事件。”。为什么好像没人看？
请勾选答案:)
只是一个简短的说明，以帮助可能犯同样愚蠢错误的其他人 - 确保您没有意外重复的 id，例如，如果您碰巧有一个与您的过滤器具有相同 id 的 div，更改事件不会触发！

标签： jquery

【解决方案1】：

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

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

传递给 .ready() 的处理程序保证在 DOM 已准备就绪，因此这通常是附加所有其他内容的最佳位置事件处理程序并运行其他 jQuery 代码，jQuery docs。

【讨论】：

【解决方案2】：

虽然与 OQ 有点无关，但如果您因为选择未触发而来到这里，请确保您之前没有选中 alert() 中的“阻止此页面显示...” .您需要关闭选项卡并重新打开该 URL 以使其再次可见地触发。

【讨论】：