Javascript 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'
        });
        });
  });
});

$（函数（）{
风险值数据=[
“按钮一”，
“按钮二”，
“按钮三”
];
var refreshButton=$（'#refresh'）。在（'click'，函数（e）上{
变量列表=$（“#按钮列表”）；
list.empty（）；
对于（i=0；i”+数据[i]+“”）
}
var clipboard=新剪贴板（'.btn'）；
剪贴板上的（'success'，函数（e）{
变量n=$（'body'）。noty({
文本：“链接已复制到剪贴板”，
超时：1000，
键入：“成功”，
主题：“metroui”
});
});
});
});

我创建了一个JSFIDLE来重现这个问题：

首先按下“加载列表”按钮

按下其中一个加载的按钮，您将看到一个通知

再次按“加载列表”

按下其中一个已加载的按钮，您将收到两个通知

重复步骤4，它将继续重复更多通知

---

这是我的代码的问题吗？

Clipboard.js创建者在这里

必须销毁Clipboard.js的上一个实例才能防止此问题

if（剪贴板）{
剪贴板。销毁（）；
}