只能在第二次点击时复制到剪贴板

Question

我在做什么

我使用clipboard.js将网址复制到剪贴板。

所以我首先在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/