无法让"clipboard.js“正常工作

Question

我不能让clipboard.js工作；我认为这是对整个事情如何工作的一个简单的“误解”，因为我甚至不能像在this Fiddle中那样让最简单的例子正常工作……

我的具体问题是让它正常工作：

HTML：

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

应该复制的div是：

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

JS是：

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

我正在进入该函数，但什么也没有发生。我试过了：

clipboard.copy();

但这给了我一个例外...

我可以得到我想要复制的文本

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

但是我应该只能通过使用clipboard.js来解决这个问题。

我不能让任何例子工作，所以如果有人给我看一个完整的例子，我会很高兴。我真的试图理解，我可能想得太多了，把事情搞得更复杂了。我不想要任何变通方法，因为我以前用过，我认为这是一个很好的js-解决方案……如果我能理解它:)

感谢每一个指向正确方向的提示！

Answer 1

确保您首先添加了正确的库;)

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

或您的本地min.js

我已经将你的代码修改为：

<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>

和js：

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

对于我，它现在复制div。如果不适合你，请告诉我。

Answer 2

API数据使用情况

import Clipboard from 'clipboard';
''''''
''''''
''''''
 var clipboard = new Clipboard('.class_name_of_the_div');
  clipboard.on('success', function (event) {});
  clipboard.on('error', function (evwnt) {});

data-clipboard-text={data.text}

Answer 3

对不起，除了你可以使用的库https://www.npmjs.com/package/clipboard之外，我没有时间阅读所有的东西

import ClipboardJS from 'clipboard'

然后是new ClipboardJS('.btn')

或者检查此import Clipboard from 'clipboard'是否专门为您的解决方案工作