jQuery中$(this)未选中点击元素反而选中window对象问题排查

哦，这个问题我太熟悉了！问题出在你用了箭头函数来定义事件回调——箭头函数不会绑定自己的this，它会继承外层作用域的this值。

具体原因分析 #

你代码里的$(document).ready用了箭头函数，此时它的外层上下文this指向的是window对象。而你给click事件绑定的回调也是箭头函数，这个箭头函数不会创建自己的this上下文，直接继承了外层的window，所以$(this)自然就选中了window，而非被点击的按钮元素。

两种解决方案 #

方案1：将点击回调改为普通函数

普通函数在事件触发时，this会自动绑定到触发事件的元素上，这是jQuery事件回调的默认行为：

$(document).ready(() => {
  $('.delete-file').on('click', function() {
    let element = $(this);
    console.log(element); // 现在会输出预期的a.btn.btn-danger.btn-xs.delete-file
  });
});

方案2：通过事件对象获取目标元素（保留箭头函数）

如果想继续使用箭头函数，可以利用事件对象的currentTarget属性（该属性始终指向绑定事件的元素，比target更稳妥，避免选中子元素如<i>标签）：

$(document).ready(() => {
  $('.delete-file').on('click', (event) => {
    let element = $(event.currentTarget);
    console.log(element); // 同样能得到正确的点击元素
  });
});

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