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() { var data = [ 'Button One', 'Button Two', 'Button Three' ]; var clipboard; var refreshButton = $('#refresh').on('click', function(e) { if (clipboard) { clipboard.destroy(); } 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>') } clipboard = new Clipboard('.btn'); clipboard.on('success', function(e) { var n = $('body').noty({ text: 'Link copied to clipboard', timeout: 1000, type: 'success', theme: 'metroui' }); }); }); });