javascript 无法让“clipboard.js”工作

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/33939898/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 17:03:24  来源:igfitidea点击:

can't get "clipboard.js" to work

javascriptclipboardclipboard.js

提问by marS

I can't get the clipboard.jsto 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...

我无法让clipboard.js工作;我认为这是关于整个事情如何运作的一个简单的“误解”,因为我什至无法获得最简单的例子来像这个 Fiddle一样正常工作......

My specific problem is getting this to work:

我的具体问题是让它发挥作用:

HTML:

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是这样的:

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

The JS is:

JS是:

$(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());

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.

但我应该只能通过使用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 :)

我无法让任何示例工作,所以如果有人向我展示一个完整的示例,我会很高兴。我真的很努力去理解,我可能把整件事想得太多了,让事情变得比现在更复杂。我不想要任何变通方法,因为我之前使用过它并认为这是一个很棒的 js 解决方案......如果我能理解的话:)

Every hint into the right direction is appreciated!

对正确方向的每一个提示都表示赞赏!

回答by Victoria S.

Make sure you add the right library first ;)

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

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

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

Or your local min.js

或者你本地的 min.js

I've altered your code to this:

我已将您的代码更改为:

var clipboard = new Clipboard('.copyButton');

clipboard.on('success', function(e) {
  console.log(e);
});

clipboard.on('error', function(e) {
  console.log(e);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.3/clipboard.min.js"></script>

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

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

对我来说,它复制了<div>现在。如果不适合你,请告诉我。