我有以下用于复制文本字符串的函数：
function copyText(str) {
console.log(str);
let tmp = $('<input type="text">').appendTo(document.body);
tmp.val(str.toString() );
tmp.select();
document.execCommand('copy');
tmp.remove();
}
无论是从控制台调用还是按下按钮调用，此功能都可以正常工作。
我有一个复制颜色的功能：
function copyColor(elm) {
let hex = $(elm.parentElement).find('span').html();
console.log('copyText("' + hex + '")' );
copyText(hex);
}
按下按钮时会调用此函数。按钮将自身作为参数传递。我正在动态地创建按钮(每个按钮代表一个新的"颜色项"(。以下是使用jQuery动态插入的HTML：
'<button class="btn copy-btn no-color" title="Copy" data-toggle="popover" onclick="copyColor(this);"><i class="fas fa-copy"></i></button>'
整件事是：
$('#' + mode + '-modal .modal-body').prepend(
'<div class="' + mode + '-item color-item">'
+ '<button class="btn open-btn no-color" title="Open Color" data-toggle="popover" onclick="openColor(this, '' + mode + '');"><i class="fas fa-external-link-alt"></i></button>'
+ '<input class="form-control color-name" type="text" placeholder="Name your color (optional)" value="' + name + '">'
+ '<br class="mobile-only">'
+ '<div class="color-preview" style="background-color:' + hex + ';"></div>'
+ '<span>' + hex + '</span>'
+ '<button class="btn copy-btn no-color" title="Copy" data-toggle="popover" onclick="copyColor(this);"><i class="fas fa-copy"></i></button>'
+ '<button class="btn link-btn no-color" title="Get Link" data-toggle="popover" onclick="copyColorLink(this);"><i class="fas fa-link"></i></button>'
+ '<button class="btn delete-btn no-color" title="Remove" data-toggle="popover" onclick="removeColor(this);"><i class="fas fa-trash"></i></button>'
+ '<i class="fas fa-arrows-alt" style="cursor:move;" title="Drag to Change Order" data-toggle="popover"></i>'
// + '<button onclick="copyText('hi')">hi</button>'
+ '</div>'
);
其中mode、hex和name都是该函数中的参数。
每次我单击复制颜色时，它都会调用copyColor()函数，获得正确的字符串，调用copyText()函数，获得错误的字符串，并且运行时没有错误，但它无法编辑我的剪贴板。当使用完全相同的字符串从控制台调用此函数时，它可以工作，并且当创建一个静态按钮来复制颜色时，例如：
<button onclick="copyText('hi')">hi</button>
那么它也很好用。我还尝试过动态添加其中一个按钮：
+ '<button onclick="copyText('hi')">hi</button>'到我的代码中，它注入HTML，并且它不起作用。
上面看到的其他动态创建的按钮也会调用函数，并将其本身作为参数传递，并且工作正常，例如delete按钮，调用以this为参数的removeColor()函数。
最后，我尝试通过以下方式为按钮提供动态ID：
'<button id="copy-btn-'+ nextID +'"等…
其中nextID是一个我递增的值，我在创建特定按钮后立即添加它的onclick监听器：
$('#copy-btn-'+nextID).click(function() {
copyText('hello');
});
nextID++;
我尝试创建一个新的复制函数，它只接收字符串，而不是传递元素，我只传递要复制的字符串：
function copyColorNew(hex) {
console.log('copyText("' + hex + '")' );
copyText(hex);
}
这是插入的按钮代码的相关部分：
onclick="copyColorNew(''+hex+'');">
并且它正确地调用了函数，传递了正确的参数，并且未能复制字符串。
我没有任何重复的函数名，所有文件都包含正确，我已经硬刷新了页面，所有变量都在各自的范围内，我从未出现过任何错误。我还省略了我做过的其他几十个不确定的实验。
我完全没有主意，几天来我每天都花几个小时在这个问题上。我很清楚如何用javascript复制字符串，我很清楚怎样创建按钮并动态附加它，我也很清楚怎样给按钮一个onclick监听器，它将自己作为参数传递。在过去，我对这些事情没有任何问题，而且在上面详细介绍的代码中，我仍然没有遇到其他问题。
我唯一能想到的是，允许动态创建的DOM元素调用访问剪贴板的函数是一个安全问题，但我甚至没有粘贴数据。
同样，静态HTML页面中的按钮可以正确复制"helloworld"，动态插入的按钮不能复制"helleworld"。
通过使用剪贴板API(由Reddit上的u/elmtfreddie建议(：
navigator.clipboard.writeText(hex);
我开始工作了。我在copyColor()函数中将copyText(hex);替换为navigator.clipboard.writeText(hex);。
这是指向文档的链接。