Can only get copy to clipboard on second click

Question

What I'm doing

I'm using clipboard.js to copy a URL to the clipboard.

So I start by rendering some HTML in PHP. The code looks something like this:

$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>";

This is done at the top of my page, before my <script> tag.

Here's what I have below in my 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);
}

I was redundantly using new Clipboard(".get-link"); in an effort to make it work.

All this code does is copy the link to the clipboard, then change the text for 2 seconds, then change it back.

The problem

It only copies the link to the clipboard after the second click on the a tag. I can't figure out why.

Edit

For some reason, this JS Fiddle shows my code working. Not sure why it doesn't work on my website.

I sufferd this problem too.... i have not good solution but it works on click where u call the function add trigger..or try with id — Maninderpreet Singh, Apr 16 '16 at 02:32
@ManinderpreetSingh The target/trigger approach didn't work for me. — Michael Yaworski, Apr 16 '16 at 02:48
Did you ever find a solution to this issue? I'm suffering the same thing.. works in fiddle, but not in my website. — wonza, Jun 13 '16 at 18:10
@wonza Unfortunately not. It seems to be an issue on their end. — Michael Yaworski, Jun 13 '16 at 19:59
Do you have SiteCatalyst on your site? Or any other event tracking code? I just realized this is what's causing the issue for me.. not quite sure how to solve it yet, as we need tracking on the page still — wonza, Jun 14 '16 at 17:31
I was able to solve this by changing my to a
as SC doesn't have events on these specifically. I styled up my div and it works perfectly now.. no more second click — wonza, Jun 14 '16 at 18:02
@wonza I might have some libraries screwing this up, so I'll look into that. Thanks for the information. — Michael Yaworski, Jun 14 '16 at 19:03

score 0 · Answer 1 · answered Oct 16 '17 at 15:06

0

Maybe you are not using document ready? Here is working solution for more links:

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

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

answered Oct 16 '17 at 15:06

apostolov

1
2

1

`$(function () {});` is the same as `$(document).ready(function () {});` – Marie Oct 16 '17 at 15:07

Can only get copy to clipboard on second click

What I'm doing

The problem

Edit

1 Answers1