为何IE11中jQuery绑定的change()事件不触发 Chrome/Edge正常

• 优先排查IE11兼容视图导致的文档模式降级
  内网办公环境下IE11通常默认开启兼容视图，会把当前页面降级到IE7及更早的文档模式渲染，这类模式下jQuery对select元素的原生change事件绑定会直接失效，Chrome、Edge因为没有兼容视图的拦截逻辑会正常运行。
  排查操作：按F12打开开发者工具，切换到「仿真」面板，查看当前实际使用的文档模式是否为IE11标准。如果不是，在页面<head>最顶部添加强制兼容声明，要求IE用最高版本内核渲染：

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  

• 改用事件委托替代直接元素绑定
  现有代码是在DOM ready阶段直接给#RCE_CountyId绑定事件，如果这个select元素是在DOM ready之后才动态插入页面（比如后端局部渲染块、异步加载组件插入），IE11会因为绑定逻辑执行时目标元素还未生成，导致绑定失效。Chrome、Edge的事件绑定容错性更高，即使绑定早于元素插入也能正常识别。
  替换为委托绑定写法，将绑定锚点换成页面加载初始就存在的父级容器（如document、外层固定的form元素）：

  $(function () {
      // 委托绑定模式，不受目标元素插入时机影响
      $(document).on('change', '#RCE_CountyId', function () {
          alert("It works !");
          var countyId = $(this).val();
          $("#RCE_RouteId").empty();
          $("#RCE_RouteId").append("<option value=''>Select Route</option>");
          $.getJSON('?handler=RouteList&CountyId=' + countyId, function (data) {
              $.each(data, function (i, item) {
                  console.log("success");
                  // 补充value属性的引号，避免DOM结构异常
                  $("#RCE_RouteId").append('<option value="' + item.routeId + '">' + item.routeName + '</option>');
              });
          });
      });
  });
  

• 替换ES6箭头函数语法，避免脚本解析报错
  如果脚本在解析阶段遇到无法识别的语法，会直接抛出中断性错误，后续所有绑定的事件逻辑都不会执行——很多场景下看起来是“change事件不触发”，本质是脚本根本没走到绑定事件的步骤。
  原代码中getJSON的回调使用了ES6箭头函数，IE11完全不支持这类语法。排查操作：按F12切换到「控制台」面板，查看页面加载完成后是否存在SCRIPT1002: 语法错误类的提示。如果有，将所有箭头函数替换为普通函数写法即可。
• 排查select元素的属性干扰
  部分ASP.NET控件的渲染逻辑会在识别到IE11（或更低版本内核）时，自动给select元素添加disabled禁用属性。Chrome、Edge对禁用元素的事件响应更宽松，但IE11下被禁用的元素不会触发任何交互事件。
  排查操作：在控制台执行$('#RCE_CountyId').prop('disabled')，如果返回true，需要调整后端控件的渲染逻辑，避免给IE11环境下的select错误添加禁用属性。

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