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 

        [email protected] 

        data-clipboard-action=copy 

        data-clipboard-target=#[email protected]>

</button>  

The div that should be copied is this:

   <div [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!