web-dev-qa-db-ja.com

「clipboard.js」を機能させることができません

clipboard.js を機能させることができません。 this Fiddle ..のように最も単純な例を正しく機能させることすらできないので、全体がどのように機能するかについての単純な「誤解」だと思います。

私の特定の問題は、これを機能させることです。

HTML：

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

コピーする必要があるdivは次のとおりです。

_   <div id="[email protected]">
       @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ソリューションだと思います...理解できれば:)

正しい方向へのあらゆるヒントを歓迎します！

javascriptclipboardclipboard.js
9
marS

最初に正しいライブラリを追加してください;）

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

またはローカルのmin.js

私はあなたのコードをこれに変更しました：

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>

私と一緒に<div>をコピーします。うまくいかない場合はお知らせください。

10
Victoria S.