正确获取被点击同名class元素文本内容的方法

时间：2026-07-17 07:02

在jQuery事件监听中，箭头函数不绑定自身this，导致$(this)无法指向当前点击元素，应使用普通函数使this正确绑定。同时，采用事件委托（如 on()）可处理动态元素，并确保代码在DOM加载后执行，常用$(document) ready()。

本文深入解析为什么在 jQuery 事件处理中使用箭头函数会导致 $(this) 指向错误，并介绍如何通过普通函数正确获取当前点击元素的内容。

在使用 jQuery 进行事件绑定时，常见场景是页面上有多个元素共享同一个 class（例如 .adressLine），我们需要点击某个元素并准确获取其文本内容。这个需求看似简单，但新手经常在事件回调中误用箭头函数，导致 $(this) 指向错误的对象，最终返回空字符串或 undefined。

那么，问题究竟出在哪里？

❌ 错误写法：箭头函数导致 this 无法正确绑定

const adressLine = $('.adressLine');
adressLine.on('click', () => {
  console.log('button clicked');
  var text = $(this).text(); // ⚠️ 箭头函数不绑定 this，指向外层作用域（如 window），而非当前 DOM 元素
  console.log(text); // 输出空字符串或 undefined（因为 this 错误）
});

关键点在于：箭头函数不绑定自己的 this，它会继承外层函数作用域的 this 值。在 JavaScript 严格模式下，这个值通常是 window（浏览器环境）或 undefined。而 jQuery 的事件处理机制依赖于普通函数的动态 this 绑定——当事件触发时，jQuery 会自动将 this 设置为当前匹配的 DOM 元素，即被点击的 .adressLine 元素。箭头函数打破了这种绑定规则，因此无法获取正确的元素。

✅ 正确写法：使用普通函数，确保 this 正确绑定

const adressLine = $('.adressLine');
adressLine.on('click', function() { // ← 使用普通函数，jQuery 可正确绑定 this 到当前元素
  console.log('button clicked');
  const text = $(this).text(); // ✅ 此时 this 指向被点击的 .adressLine 元素
  console.log(text); // 输出该元素内纯文本内容（不含 HTML 标签）
});

提示：根据实际需要，还可使用 $(this).html() 获取包含 HTML 标签的完整内容，或通过 $(this).attr('data-text') 读取自定义属性值，非常灵活。

如何验证 this 绑定是否正确？

在回调中加入几行调试代码，打印出 this 和 $(this) 的类型，就能一目了然：

adressLine.on('click', function() {
  console.log('Raw this:', this);           // → 输出 HTMLDivElement 实例
  console.log('jQuery this:', $(this));     // → 输出 jQuery 对象，包含该元素
  console.log('Text content:', $(this).text().trim()); // 推荐使用 trim() 清除首尾空白
});

⚠️ 重要注意事项与最佳实践

避免在依赖 this 事件上下文中使用箭头函数：不仅限于 jQuery，原生 addEventListener（需使用 e.currentTarget）等依赖函数级 this 绑定的场景，箭头函数都不适用。这是前端开发中必须牢记的原则。
确保 DOM 已加载完成：将代码包裹在 $(document).ready() 中，或将脚本放在标签底部。否则，如果选择器执行时目标元素尚未出现在 DOM 中，返回的将是一个空集合。
考虑事件委托（进阶场景）：如果 .adressLine 是动态添加到页面上的元素（例如通过 AJAX 加载或用户交互后生成），直接绑定事件可能失效。此时，事件委托是更可靠的方案：
```
$(document).on('click', '.adressLine', function() {
  console.log($(this).text());
});
```
其原理是将事件处理挂载到父级容器（这里使用 document 作为兜底），通过事件冒泡机制捕获来自子元素 .adressLine 的点击事件。这样，即使目标元素是后来生成的，也能被正确响应。