为什么jQuery点击事件中$(this)返回undefined而非被点击元素？

问题原因 #

你遇到的$(this)返回undefined的问题，完全是因为事件回调使用了箭头函数导致的：

• 箭头函数没有独立的this作用域，它内部的this会直接继承自定义时外层作用域的this，不会被jQuery动态绑定为触发事件的DOM元素。
• 如果你使用普通函数作为jQuery事件回调，jQuery会自动将回调内的this指向绑定事件/触发事件的DOM元素，这是jQuery的默认设计，箭头函数打破了这个绑定逻辑。

修复方案 #

你可以二选一：

1. 替换箭头函数为普通匿名函数，即可正常使用$(this)：

$('.nav-search-options').on('click', function(event) {
  console.log($(this)) // 正常输出对应DOM元素的jQuery对象
})

2. 保留箭头函数的话，建议使用event.currentTarget代替this，它和你原需求的$(this)完全等价（如果不需要事件冒泡触发的最内层元素，event.target也能满足基础需求）：

$('.nav-search-options').on('click', (event) => {
  console.log($(event.currentTarget)) 
})

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