jQuery动态生成ID与复制按钮后剪贴板复制功能失效排查

我有一系列包含待复制内容的div，要实现右上角悬浮复制按钮的效果，静态代码能正常运行，但动态生成的复制功能失效——页面HTML结构看起来和静态版一致，但点击按钮无法复制内容，求解决。

静态可正常运行的代码 #

HTML结构 #

<div class="token-block">
  <div class="token" id="copy-1">{{customText[<span id="custom_wrapper"> 
   <span class="output"></span><span class="output"></span></span>]}}</div>
  <button type="button" class="copy" onclick="copy('#copy-1')" aria-hidden="false" aria-label="Copy to clipboard">
    <span class="visually-hidden">Copy to Clipboard</span>
  </button>
</div>

复制函数 #

function copy(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  $temp.remove();
}

动态生成的失效代码 #

动态结构生成代码 #

$(function() {
  // 其他业务代码...
  $('.token').wrap('<div class="token-block"></div>'); 
  $('.token').each(function(){
        i=0;
        $(this).attr('id', 'token-'+i+'');
        $(this).append('<button type="button" class="copy" onclick="copy(#copy-'+i+')" aria-hidden="false" aria-label="Copy to clipboard"><span class="visually-hidden">Copy to Clipboard</span></button>');
        i++;
      });
});

function copy(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  $temp.remove();
}

问题原因分析 #

1. 循环变量重置：i=0写在each循环内部，每次循环都会把i重置为0，导致所有token的ID都是token-0，按钮调用的选择器也完全重复。
2. 选择器语法错误：按钮onclick里的copy(#copy-'+i+')没有给选择器加引号，会被JS当作变量解析，而非字符串选择器。
3. ID不匹配：动态给token设置的ID是token-xxx，但按钮里调用的是#copy-xxx，两者完全对应不上，自然找不到目标元素。
4. 元素结构错误：静态代码里按钮是token的同级元素，但动态代码用append把按钮放到了token内部，结构其实不一致。
5. 内联事件绑定不可靠：动态生成的元素用内联onclick容易出现作用域问题，不如事件委托稳定。

修复后的jQuery方案 #

$(function() {
  // 其他业务代码...
  $('.token').wrap('<div class="token-block"></div>'); 
  
  // 用each的索引作为唯一标识，避免变量冲突
  $('.token').each(function(index){
    // 给token设置唯一ID（可选，其实可以不用ID）
    var tokenId = 'copy-' + index;
    $(this).attr('id', tokenId);
    
    // 创建复制按钮，放到token的同级位置，和静态结构一致
    var $copyBtn = $(`
      <button type="button" class="copy" aria-hidden="false" aria-label="Copy to clipboard">
        <span class="visually-hidden">Copy to Clipboard</span>
      </button>
    `);
    $(this).after($copyBtn);
  });

  // 用事件委托绑定复制事件，适配动态生成的按钮
  $(document).on('click', '.copy', function() {
    // 通过兄弟关系获取目标token，不用依赖ID更可靠
    var $targetToken = $(this).siblings('.token');
    var $temp = $("<input>");
    
    $("body").append($temp);
    $temp.val($targetToken.text()).select();
    document.execCommand("copy");
    $temp.remove();
    
    // 可选：添加复制成功的反馈
    // $(this).attr('aria-label', '已复制！');
    // setTimeout(() => $(this).attr('aria-label', '复制到剪贴板'), 2000);
  });
});

核心修复点 #

• 利用each自带的index参数作为唯一标识，彻底解决循环变量重置问题。
• 用after把按钮放到token同级，和静态代码结构完全匹配。
• 采用jQuery事件委托绑定点击事件，无需内联onclick，完美支持动态生成的元素。
• 通过兄弟元素关系获取目标内容，不再依赖ID，避免ID匹配错误的问题。

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