IE11中jQuery的$(this)调用parents/closest函数失效求助

哥们，我之前在IE11里踩过几乎一模一样的坑！结合你的情况，咱一步步排查解决：

最可能的元凶：事件绑定用了箭头函数（IE11不兼容+this指向错误） #

如果你的事件绑定代码是这样的：

$('input[type=checkbox]').on('change', () => {
  // 这里的this是undefined或者指向全局window！
  $(this).closest('.parent-element');
});

赶紧改成普通函数！箭头函数的this是词法作用域绑定的，不会指向触发事件的DOM元素，而且IE11本身就不支持箭头语法：

$('input[type=checkbox]').on('change', function() {
  // 这里的this就是触发事件的复选框DOM元素了
  const $checkbox = $(this);
  $checkbox.closest('.parent-element'); // 正常工作
});

第二大坑：动态生成的复选框没用到事件委托 #

如果你的复选框是通过AJAX、动态渲染生成的（不是页面加载时就存在的），直接绑定事件会失效，而且this也会出问题。这时候必须用事件委托绑定到父级（或者document）：

// 委托到静态存在的父元素，比如#container
$('#container').on('change', 'input[type=checkbox]', function() {
  const $checkbox = $(this);
  $checkbox.parents('.target-parent');
});

强制兜底：手动把this转为jQuery对象 #

有时候即使this存在，也可能是原生DOM元素，直接调用jQuery方法会报错。所以一定要先把它包装成jQuery对象再操作：

$('input[type=checkbox]').on('change', function() {
  // 先把原生DOM转成jQuery对象
  const $currentCheckbox = $(this);
  // 再调用closest/parents
  const $targetParent = $currentCheckbox.closest('.parent-class');
});

额外排查点：IE11不支持的语法 #

检查代码里有没有这些IE11不兼容的写法：

• 用let/const代替var（IE11不支持块级作用域变量）
• 使用了ES6+的其他语法（比如解构、模板字符串）
  如果有，要么改成ES5语法，要么用Babel转译你的代码。

快速测试最小案例 #

如果还是有问题，先写个极简的测试代码在IE11里跑，确认基础逻辑没问题：

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div class="test-parent">
  <input type="checkbox" class="test-checkbox"> 测试复选框
</div>
<script>
$('.test-checkbox').on('change', function() {
  console.log('this:', this); // IE11控制台应该输出复选框DOM元素
  console.log('closest parent:', $(this).closest('.test-parent')); // 应该找到父div
});
</script>

如果这个能正常运行，说明你的业务代码里有其他冲突（比如其他JS库覆盖了jQuery、DOM结构写错了），再逐步排查。

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