为何jQuery中$(this).attr('id')返回undefined？附代码示例

API 探路者

2026-5-15

解决jQuery点击按钮后p标签显示undefined的问题

我来帮你排查这个问题，咱们先拆解可能的原因，再给出对应的修复方案：

可能的原因及修复方案

1. 确保DOM加载完成后再绑定事件

如果你的jQuery代码写在HTML元素之前（比如<head>标签里），浏览器执行JS时，.btn按钮还没被渲染出来，会导致事件绑定异常。虽然你说点击后显示undefined，但还是建议把代码包裹在$(document).ready()里，确保DOM完全加载后再执行：

$(document).ready(function() {
  $('.btn').click(function() {
    var id = this.id; // 改用原生属性获取ID更可靠
    $('p').html(id);
  });
});

2. 替换`attr('id')`为原生`this.id`

jQuery的attr()方法在处理元素固有属性时，有时候不如直接访问原生DOM属性稳定。你可以直接用this.id获取按钮的ID，这是更直接且不易出错的方式：

$('.btn').click(function() {
  var id = this.id; // 替换$(this).attr('id')
  $('p').html(id);
});

修改后测试，应该能正确显示按钮的ID"1"。

3. 确认jQuery库已正确引入

如果页面没有正确引入jQuery，或者自定义JS代码写在jQuery引入之前，会导致$无法识别为jQuery对象，可能引发异常行为。请确保在你的自定义JS代码之前，已经正确引入了jQuery库。

4. 检查页面是否存在多个`.btn`元素

如果页面上还有其他带.btn类的按钮，其中某个按钮没有设置id属性，点击它就会显示undefined。你可以给目标按钮加一个更独特的类，或者直接用ID选择器绑定事件（建议ID不要以纯数字开头，虽然HTML5允许，但部分旧环境可能存在兼容性问题）：

$('#btn1').click(function() {
  var id = this.id;
  $('p').html(id);
});

对应的HTML修改为：

<button class="btn" id="btn1"></button> <p></p>

验证修改后的完整代码

整合所有建议后的完整示例：

<!DOCTYPE html>
<html>
<head>
  <script src="jquery.min.js"></script> <!-- 确保引入正确的jQuery文件 -->
  <script>
    $(document).ready(function() {
      $('.btn').click(function() {
        var id = this.id;
        $('p').html(id);
      });
    });
  </script>
</head>
<body>
  <button class="btn" id="1"></button> <p></p>
</body>
</html>

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

为何jQuery中$(this).attr('id')返回undefined？附代码示例

可能的原因及修复方案 #

1. 确保DOM加载完成后再绑定事件 #

2. 替换attr('id')为原生this.id #

3. 确认jQuery库已正确引入 #

4. 检查页面是否存在多个.btn元素 #