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/

首先按下 "load list" 按钮
按下其中一个已加载的按钮，您将看到一条通知
再按一次"load list"
按其中一个已加载的按钮，您将收到 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'
     });
 });
  });
});

Clipboard.js 成功事件触发多个

Clipboard.js firing multiple on success events

javascript

jquery

clipboard.js