编辑：Simone给出的解决方案是有效的，但它是用JavaScript编写的，因为我已经用JQuery编写了其他所有代码，所以我希望有一个JQuery解决方案。
我有一系列的div widht内容要复制。看了不同的例子，我决定把要复制的内容放在一个div里，然后再放一个隐藏的复制按钮。我把所有内容都放在一个div里的相对位置上，这样我就可以把按钮放在右上角的绝对位置上，就像this example一样。
下面是我的代码示例：

<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>
</div>

复制功能可以完美地与以下内容配合使用：

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

但是我更喜欢动态的解决方案，所以我动态地添加了 Package div、id和copy按钮。

$(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();
}

它不工作...所以这里出了什么问题？当我检查元素时，代码在html中是完全相同的，但如果我动态地做它，它就不再工作了。
有人能帮忙吗？