只能在第二次单击时将副本复制到剪贴板

Can only get copy to clipboard on second click

本文关键字：副本 复制 剪贴板 第二次 单击      更新时间：2023-09-26

我在做什么

我正在使用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标记后将链接复制到剪贴板。我不明白为什么。

编辑

出于某种原因，这个JS Fiddle显示了我的代码正在工作。不知道为什么它在我的网站上不起作用。

也许您没有使用文档就绪？以下是更多链接的工作解决方案：

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

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

相关文章：