javascript - Clipboard.js 在成功事件上触发多个

我在项目中使用 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/

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

按加载的按钮之一，您将看到通知

再次按下“加载列表”

按加载的按钮之一，您将收到 2 个通知

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

这是我的代码的问题吗？

最佳答案

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

关于javascript - Clipboard.js 在成功事件上触发多个，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42227496/