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. 按其中一個加載的按鈕，你會看到一個通知
3. 再次按下「加載列表」
4. 按一個加載的按鈕，你會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 }); 
 
    }); 
 
});