は "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(); 
    }); 
}); 

私は機能に入っていますが、何も起こっていません。私が試した：私は

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

をコピーしたいという、テキストを取得することができます。しかし、私はできるだけであるべき

clipboard.copy(); 

それはちょうど私の例外がスローされます... 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をコピーします。それがあなたのためでなければ私に教えてください。