动态拼接URL拉取JSON时剪贴板复制功能失效问题排查

两段代码功能表现不一致，核心是异步执行逻辑和事件绑定逻辑的错误，一共3个具体问题：

• 第一段代码在页面加载阶段就提前发起fetch请求拉取JSON、提前绑定好全局copy事件，等你点击按钮触发document.execCommand('copy')时，wfComponent早就拿到了有效值，copy事件回调也已经注册完成，所以可以正常写入剪贴板。
• 第二段代码把所有逻辑都塞在按钮点击回调里，存在3个致命错误：
  • fetch是异步非阻塞操作：点击按钮后才发起网络请求，但代码不会等请求返回就继续往下执行，触发复制动作时wfComponent还是空值undefined
  • 事件绑定时机错误+重复绑定：每次点击按钮都会新增一个copy事件监听器，点击次数越多绑定的冗余监听器越多，还会出现旧值覆盖问题；同时你在点击回调内部又给同一个按钮绑定了一次onclick事件，等于第一次点击时才给按钮注册第二次点击的触发逻辑，第一次点击根本不会执行复制
  • 重复给按钮绑定onclick会覆盖原有jQuery绑定的点击逻辑，后续点击行为会完全混乱。

不要嵌套绑定事件，全局只绑定一次copy事件，点击按钮时先拉取对应JSON内容，等内容拉取完成后再触发复制操作：

// 全局只注册一次copy事件，无需重复绑定
let currentComponent = '';
document.addEventListener("copy", function (e) {
  e.clipboardData.setData("application/json", currentComponent);
  e.preventDefault();
});

// 给所有复制按钮统一绑定点击逻辑
$(".button.copy-button").on("click", async function () {
  const tag = $(this).attr("id");
  try {
    // 等待JSON拉取完成再执行后续逻辑
    const res = await fetch(`https://nube-components.netlify.app/${tag}.json`);
    currentComponent = await res.text();
    console.log('加载到的组件内容：', currentComponent);
    // 内容就绪后触发复制
    document.execCommand("copy");
    // 可在此处添加复制成功的提示，比如临时修改按钮文字为「已复制」
  } catch (err) {
    console.error('组件加载或复制失败：', err);
  }
});

补充优化建议：document.execCommand('copy') 已经被官方标记为废弃API，如果你不需要兼容特别老的浏览器，可以直接用现代剪贴板API，不需要额外绑定copy事件，逻辑更简洁：

$(".button.copy-button").on("click", async function () {
  const tag = $(this).attr("id");
  try {
    const res = await fetch(`https://nube-components.netlify.app/${tag}.json`);
    const componentText = await res.text();
    // 直接把内容写入剪贴板
    await navigator.clipboard.writeText(componentText);
    console.log('复制成功');
  } catch (err) {
    console.error('操作失败：', err);
  }
});

注意这个API要求页面运行在HTTPS环境或者本地localhost开发环境，和你当前使用fetch的环境要求一致。

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