can't get "clipboard.js" to work

Question

I can't get the clipboard.js to work; I think it's a simple "misunderstanding" about how the whole thing works, since I'm not even able to get the most simple example to work properly like in this Fiddle...

My specific problem is getting this to work:

HTML:

<button class="copyButton" 
        id="copyButtonId" 
        data-id="@item.Type" 
        data-clipboard-action="copy" 
        data-clipboard-target="#[email protected]">
</button>  

The div that should be copied is this:

   <div id="[email protected]">
       @item.Type
       Name...: @item.Name
       Address: @item.Address
   </div>`

The JS is:

$(function() {
$(document).on("click", ".copyButton", function() {
    var clipboard = new Clipboard(".copyButton"); 
    clipboard.destroy();
  });
});

I'm getting into the function, but nothing is happening. I tried:

clipboard.copy();

but that just throws me an exception...

I can get the text, that I want to copy

var id= "copy_" + $(this).attr("data-id"); var source = ($("#" + agent).html());

But I should be able only to work it out by using clipboard.js.

I can't get any examples to work, so I would be happy if someone shows me a complete example. I've really tried to understand and I may be overthinking the whole thing and making this more complicated than it is. I don't want any workarounds, as I used that before and think this is a great js-solution... If I could just understand it :)

Every hint into the right direction is appreciated!

Answer 1

Make sure you add the right library first ;)

<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.3/clipboard.min.js"></script>

Or your local min.js

I've altered your code to this:

<div id="copy">
    @item.Type
    Name...: @item.Name 
    Address: @item.Address
</div>

<button class="copyButton" id="copyButtonId" data-id="@item.Type"
 data-clipboard-action="copy" data-clipboard-target="div#copy">Copy!</button>

and the js:

var clipboard = new Clipboard('.copyButton');
clipboard.on('success', function(e) {
    console.log(e);
});
clipboard.on('error', function(e) {
    console.log(e);
});

With me it copies the div now. Let me know if it doesn't for you.