使用jQuery实现复制功能：点击i标签获取span值返回undefined求助

别担心，你的问题很常见，咱们一步步来搞定它！

首先，你当前代码出现undefined的大概率原因是代码在DOM元素加载完成前就执行了——jQuery需要确保目标元素已经存在于页面中，才能成功绑定点击事件。另外，咱们还可以优化文本获取的方式，再实现真正的剪贴板复制功能。

修正后的完整代码 #

// 等待DOM完全加载后再执行逻辑
$(document).ready(function() {
  $("i.copy").click(function() {
    // 获取span内的纯ID文本（过滤掉图标元素的干扰）
    const targetText = $(this).parent().contents()
      .filter(function() {
        return this.nodeType === 3; // 只选取文本节点
      }).text().trim(); // 去除多余空格
    
    // 先验证获取到的内容（可根据需要删除console.log）
    console.log("获取到的ID:", targetText);
    
    // 实现复制到剪贴板功能
    navigator.clipboard.writeText(targetText)
      .then(() => {
        alert("ID已成功复制到剪贴板！");
      })
      .catch(error => {
        console.error("复制失败:", error);
        alert("复制失败，请手动复制该ID！");
      });
  });
});

关键知识点解释 #

• DOM就绪事件：$(document).ready()确保代码在所有页面元素加载完成后再执行，避免因元素未加载导致的选择器失效、返回undefined的问题。
• 精准获取文本：用contents().filter()筛选出span内的纯文本节点，这样即使后续span内添加其他元素，也能准确拿到ID内容；trim()则会去除文本前后的多余空格，得到干净的目标值。
• 现代剪贴板API：navigator.clipboard.writeText()是浏览器原生支持的复制方法，相比旧的“创建隐藏input再复制”的方式更简洁、可靠，兼容性也覆盖了绝大多数现代浏览器。

简化版备选方案 #

如果你的HTML结构不会变动（span内只有ID文本和图标），也可以用更简洁的方式获取文本：

$(document).ready(function() {
  $("i.copy").click(function() {
    const targetText = $(this).parent().text().trim();
    navigator.clipboard.writeText(targetText)
      .then(() => alert("复制成功！"))
      .catch(() => alert("复制失败，请手动复制！"));
  });
});

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