Clipboard.js成功イベントで複数回発生

Question

私はボタンを押したときにテキストをクリップボードにコピーできるように、プロジェクトでClipboard.jsを使用しています。

正常に動作しますが、jQueryを使用してリスト内のボタンのリストをリフレッシュすると、成功イベントが複数発生します。ここでエラーを再現しますいくつかのサンプルコードです。

$(function() { 
    var data = [ 
    'Button One', 
    'Button Two', 
    'Button Three' 
]; 

var refreshButton = $('#refresh').on('click', function(e) { 
    var list = $('#buttonList'); 
    list.empty(); 

    for(i=0; i < data.length; i++) { 
     list.append('<li><button class="btn" data-clipboard-text="Copy Me">' + data[i] + '</button></li>') 
    } 

    var clipboard = new Clipboard('.btn'); 
    clipboard.on('success', function(e) { 
     var n = $('body').noty({ 
     text: 'Link copied to clipboard', 
     timeout: 1000, 
     type: 'success', 
     theme: 'metroui' 
     }); 
     }); 
    }); 
}); 

私は問題を再現するためにjsFiddleを作成しました：https://jsfiddle.net/jdfj52or/

1. 初回は、「ロード・リスト」ボタン
2. を押して、ロードされたの1ボタンを押すと通知が表示されます
3. "load list"をもう一度押してください
4. ロードされたボタンの1つを押すと2つの通知が表示されます

手順4を繰り返し、さらに通知を繰り返します。

これは私のコードに問題がありますか？

Answer 1

Clipboard.jsの作成者です。

この問題を回避するには、Clipboard.jsの前のインスタンスを破棄する必要があります。

if (clipboard) { 
 
    clipboard.destroy(); 
 
}

ここでは完全なコードとJSFiddleです：

$(function() { 
 
\t var data = [ 
 
    \t 'Button One', 
 
    'Button Two', 
 
    'Button Three' 
 
]; 
 
var clipboard; 
 

 
var refreshButton = $('#refresh').on('click', function(e) { 
 
    if (clipboard) { 
 
    \t clipboard.destroy(); 
 
    } 
 

 
\t var list = $('#buttonList'); 
 
    list.empty(); 
 
    
 
    \t for(i=0; i < data.length; i++) { 
 
    \t \t list.append('<li><button class="btn" data-clipboard-text="Copy Me">' + data[i] + '</button></li>') 
 
    \t } 
 
    
 
    clipboard = new Clipboard('.btn'); 
 
    \t clipboard.on('success', function(e) { 
 
    \t \t var n = $('body').noty({ 
 
      text: 'Link copied to clipboard', 
 
      timeout: 1000, 
 
      type: 'success', 
 
      theme: 'metroui' 
 
    \t }); 
 
\t }); 
 
    }); 
 
});