使用jQuery on click时$(this).prop('id')返回undefined求助

我太懂这种对着代码抓耳挠腮的懊恼了！$(this).prop('id')一直返回undefined，大概率是this的指向或者元素本身的问题，咱们一步步来排查：

1. 最常见的坑：this的上下文跑偏了 #

很多时候是写代码时的上下文导致this不再指向目标DOM元素，比如：

• 用了箭头函数：箭头函数不会绑定自己的this，它会继承外层上下文的this，如果是在全局环境下就是window，自然拿不到元素id：

  // 错误示例
  $('.my-element').click(() => {
    console.log($(this).prop('id')); // 必然返回undefined
  });
  

• 嵌套在定时器、AJAX回调里：这类异步操作里的this也会脱离原元素上下文。

解决办法：

• 改用普通函数作为事件回调：

  $('.my-element').click(function() {
    console.log($(this).prop('id')); // 正常获取id
  });
  

• 或者提前把目标元素存起来，用event.currentTarget替代：

  $('.my-element').click((event) => {
    const $target = $(event.currentTarget);
    console.log($target.prop('id'));
  });
  

2. 目标元素根本没有id属性 #

别笑，真的会有这种疏忽！先检查你的HTML，确认你绑定事件的元素确实带有id属性：

<!-- 无效：没有id属性 -->
<div class="my-element">点我</div>
<!-- 有效：带有id属性 -->
<div class="my-element" id="box-1">点我</div>

你可以先打印当前元素验证：console.log($(this))，在控制台里展开元素，确认有没有id字段。

3. 选择器选中了错误的元素 #

如果你的选择器太宽泛（比如用了$('div')这类全局选择器），可能绑定到了没有id的元素上；或者是事件委托场景下，this指向了父元素而非目标子元素。

解决办法：

• 用console.log($(this))确认当前元素是不是你要操作的那个；
• 优化选择器，让它更精准，比如$('.my-element.target')。

4. 其实可以更简单：直接用原生JS获取id #

没必要非得依赖jQuery的prop方法，原生的this.id就能直接拿到元素id，更高效还不容易出问题：

$('.my-element').click(function() {
  console.log(this.id); // 直接获取id，稳得很
});

内容的提问来源于stack exchange，提问作者Ara Balaki Mr Balaki