0

Edit : the solution given by simone works, but it is in javascript, and as I already coded everything else in jquery, I 'd love a jquery solution..

I have a series of divs widht content to copy. Looking at different examples, I decide to put a div with the content to copy, and just after that a hidden copy button. I wrap everything in a div in relative position, so that I can put the button in absolute position in the top right corner, exactly like this example.

Here is an example of my code:

<div class="token-block">
  <div class="token" id="copy-1">{{customText[<span id="custom_wrapper"> 
   <span class="output"></span><span class="output"></span></span>]}}</div>
          <button type="button" class="copy" onclick="copy('#copy-1')" aria-hidden="false" aria-label="Copy to clipboard"><span class="visually-hidden">Copy to Clipboard</span></button>
  </div>
</div>

The copy function works perfectly with this :

function copy(element) {
        var $temp = $("<input>");
        $("body").append($temp);
        $temp.val($(element).text()).select();
        document.execCommand("copy");
        $temp.remove();
    }

But I'd prefer to have a dynamic solution. So I add the wrapping div, the id and copy button dynamically.

$(function() {
 ....
  $('.token').wrap('<div class="token-block"></div>'); 
  $('.token').each(function(){
        i=0;
        $(this).attr('id', 'token-'+i+'');
        $(this).append('<button type="button" class="copy" onclick="copy(#copy-'+i+'")" aria-hidden="false" aria-label="Copy to clipboard"><span class="visually-hidden">Copy to Clipboard</span></button>');
         i++;
       });
});
function copy(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  $temp.remove();
}

It doen't work..So What is wrong here ? the code when I inspect the element is exactly the same in the html, but if I do it dynamicaly, it doesn't work anymore..

can someone help please ??

4
  • Are you sure you need this structure? Or you are open to change it? Commented Nov 16, 2022 at 7:00
  • hello thanks for the reply..can you clarify ? yes I can change it but does the way I structured the page make it harder to copy and paste? I'd like to keep the same look if possible
    – blogob
    Commented Nov 16, 2022 at 7:13
  • but regarding the jquery code, yes I'm not sure at all, and this can be changed
    – blogob
    Commented Nov 16, 2022 at 7:14
  • Why you need jquery? You might not need jQuery, and clipboard api is in pure JS (like jquery on the other hand) Commented Nov 16, 2022 at 7:25

2 Answers 2

1

EDIT : ok finaly I found a solution, in jquery, with dynamicaly added elements. Simone's solution below is cleaner, and she gives javascript and jquery solution.

To add wrapping div, and the hidden button :

$('.token').wrap('<div class="token-block"></div>');
   
    $('.token-block').each(function(){
     
      $(this).append('<button type="button" class="copy" onclick="copy(this)" aria-hidden="false" aria-label="Copy to clipboard"><span class="visually-hidden">Copy to Clipboard</span></button>');
     
    });   

And in the copy function, I can now target the right element to copy

function copy(element) {
var $temp = $("<input>");
    $("body").append($temp);
    $temp.val($(element).parent().find('.token').text()).select();
    document.execCommand("copy");
    $temp.remove();
}
-1

I propose you a pure JS solution because clipboard used that like:

function copy(div) {
  navigator.clipboard.writeText(div.innerText).then(
    function() {
      //if function work done work
      alert('copy done by clipboard');
    },
    function() {
      //if fail cliboard use execCommand
      const inputTemp = document.createElement("input");
      inputTemp.setAttribute("value", div.innerText);
      document.body.appendChild(inputTemp);
      inputTemp.select();
      document.execCommand("copy");
      document.body.removeChild(inputTemp);
      alert('copy done by execCommand');
    }
  )
}
<div class="token" onclick="copy(this)">My text blablalbda</div>


function copy(div) {
  navigator.clipboard.writeText(div.innerText).then(
    function() {
      //if function work done work
      alert('copy done by clipboard');
    },
    function() {
      const $temp = $("<input>");
      $temp.val($(div).text())
      $("body").append($temp);
      $temp.select();
      document.execCommand("copy");
      $temp.remove();
      alert('copy done by execCommand');
    }
  )
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="token" onclick="copy(this)">My text blablalbda</div>

6
  • sorry simone, I edit my question because I'd really like a jquery dynamic solution
    – blogob
    Commented Nov 17, 2022 at 16:46
  • First of all jquery is javascript so I don't see the problem. Second doesn't exist another solution good luck Commented Nov 17, 2022 at 18:46
  • yes of course you are right..but what do you mean by "doesn't exist another solution" ? In fact having jquery code melted with javascript doesn't seem very clean to me.. Maybe I'm wrong .. you gave me a "-1" because I cancelled the point I gave you, but I think my solution can be useful to people looking for a jquery alternative..I'm not saying that you're wrong, just that compared to my initial question, your answer is not ideal..your answer is however very useful.can you remove your negative point so that I can award myself the point?
    – blogob
    Commented Nov 17, 2022 at 19:10
  • I didn't downvote your question. The only code you can traslate from js to jquery is the second part of code i will edit my question just for you. Commented Nov 18, 2022 at 7:00
  • As you can see from my edited answer navigator.clipboard and document.execCommand("copy") have no equivalent in jqeury. Commented Nov 18, 2022 at 7:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.