JavaScript点击链接获取span标签内文本的实现问题求助

算力阿峰

2026-7-14

解决方案

先解决「$ not defined」的问题

这个错误说明页面没加载jQuery，或者加载顺序错了（比如你的代码写在jQuery加载之前）：

先确认页面里是否引入了jQuery脚本，比如在<head>或页面底部加：
```
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
```
确保你的自定义代码写在jQuery加载之后，或者用$(document).ready()包裹。

修复代码逻辑错误

你之前的两段代码存在选择器、事件绑定逻辑的问题，以下是可行的修正方案：

方案1：jQuery 正确实现

$(document).ready(function() {
  // 绑定a标签的点击事件
  $('a').on('click', function(e) {
    // 可选：阻止原链接跳转和onclick里的loadContent执行
    e.preventDefault();
    e.stopPropagation();
    
    // 获取子元素span的文本，trim去除多余空格
    var linkText = $(this).find('.navitem').text().trim();
    console.log(linkText); // 输出 "Click Link"
    // 这里写你需要用这个文本的逻辑
  });
});

错误说明：

你第一段代码里的. navitem多了空格，事件委托的目标也搞反了；
find('.navitem')才是正确获取a标签下的span子元素的方式。

方案2：原生JavaScript 实现（无需jQuery）

如果不想依赖jQuery，直接用原生JS更稳妥：

document.addEventListener('DOMContentLoaded', function() {
  // 找到所有包含.navitem的a标签
  const targetLinks = document.querySelectorAll('a:has(.navitem)');
  
  targetLinks.forEach(link => {
    link.addEventListener('click', function(e) {
      // 可选：阻止默认行为
      e.preventDefault();
      e.stopPropagation();
      
      const spanElement = this.querySelector('.navitem');
      const linkText = spanElement.textContent.trim();
      console.log(linkText); // 输出 "Click Link"
    });
  });
});