JQuery on change方法失效，请求排查原因

以下是针对你的jQuery监听select事件无效问题的排查步骤：

• 确保代码在DOM加载完成后执行
  你的脚本如果放在<head>中，会在页面元素渲染前执行，此时#firstSelect还不存在，导致事件绑定失败。解决办法是把代码包裹在DOM就绪事件中：

  $(document).ready(function() {
      $('#firstSelect').on('change', function() {
          console.log("selected");
          alert( $(this).find(":selected").val() );
      });
  });
  

  或者将你的脚本标签移到</body>闭合标签之前。

• 验证元素ID的正确性
  打开浏览器开发者工具（F12），切换到「元素」面板，搜索firstSelect，确认页面中存在这个ID的select元素，且没有拼写错误、重复ID的情况。如果ID不匹配，事件自然无法触发。

• 处理动态生成的元素
  如果你的select元素是通过AJAX、模板渲染等方式动态添加到页面的，直接绑定事件会失效，需要使用事件委托，将事件绑定到已存在的父元素（或document）上：

  $(document).on('change', '#firstSelect', function() {
      console.log("selected");
      alert( $(this).find(":selected").val() );
  });
  

• 排查JS冲突
  页面中如果引入了其他使用$符号的库（比如Prototype），会和jQuery冲突。可以改用jQuery代替$来调用：

  jQuery('#firstSelect').on('change', function() {
      console.log("selected");
      alert( jQuery(this).find(":selected").val() );
  });
  

• 检查控制台错误
  打开浏览器控制台（F12），查看「控制台」面板是否有报错信息，比如$ is not defined（说明jQuery未正确加载）、语法错误等，这些都会导致代码无法正常执行。

内容的提问来源于stack exchange，提问作者Conta