javascript - 只能在第二次单击时复制到剪贴板

Question

我在做什么

我正在使用 clipboard.js将 URL 复制到剪贴板。

所以我首先在 PHP 中呈现一些 HTML。代码看起来像这样:

$copyToClipboard = "copyToClipboard(".$id.");";
echo "<a id='get-link-$id' class='small-button get-link' onclick='$copyToClipboard' data-clipboard-text='myText'><u>Get Link</u></a>";

这是在我的页面顶部完成的，在我的 <script> 之前标签。

下面是我的脚本中的内容:

new Clipboard(".get-link"); // initialize clipboard elements
$(function() {
    new Clipboard(".get-link"); // initialize clipboard elements
});

function copyToClipboard(id) {
    new Clipboard(".get-link");
    new Clipboard("#get-link-" + id);
    $("#get-link-" + id).text("Copied!");
    setTimeout(function(){ $("#get-link-" + id).text("Get Link"); }, 2000);
}

我多余地使用了 new Clipboard(".get-link");努力让它发挥作用。

这段代码所做的就是将链接复制到剪贴板，然后更改文本 2 秒，然后再将其更改回来。

问题

它只会在 第二次 单击 a 后将链接复制到剪贴板标签。我不明白为什么。

编辑

出于某种原因，this JS Fiddle显示我的代码工作。不确定为什么它在我的网站上不起作用。

Answer 1

也许您没有准备好使用文档？这是更多链接的工作解决方案:

$(document).ready(function(){
    new Clipboard(".get-link"); // initialize clipboard elements
});

https://jsfiddle.net/j8yLssy9/11/