javascript - 无法让 "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();

但这只会抛出一个异常(exception)......

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

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。如果它不适合你，请告诉我。