如何在jquery中动态添加id复制到剪贴板?

3b6akqbq  于 2022-11-22  发布在  jQuery
关注(0)|答案(2)|浏览(135)

编辑: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中是完全相同的,但如果我动态地做它,它就不再工作了。
有人能帮忙吗?

a64a0gku

a64a0gku1#

我建议您使用一个纯JS解决方案,因为剪贴板使用了以下内容:
第一个
第一次

sr4lhrrt

sr4lhrrt2#

    • EDIT * * : 好 的 , 最 后 我 找到 了 一 个 解决 方案 , 在 jquery 中 , 有 动态 添加 的 元素 。 Simone 的 解决 方案 比较 干净 , 她 给出 了 javascript 和 jquery 的 解决 方案 。

要 添加 环绕 div 和 隐藏 按钮 , 请 执行 以下 操作 :

$('.token').wrap('<div class="token-block"></div>');
   
    $('.token-block').each(function(){
     
      $(this).append('<button type="button" class="copy" onclick="copy(this)" aria-hidden="false" aria-label="Copy to clipboard"><span class="visually-hidden">Copy to Clipboard</span></button>');
     
    });

中 的 每 一 个
在 复制 功能 中 , 我 现在 可以 定位 要 复制 的 正确 元素

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

格式

相关问题