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/

首先按“加载列表”按钮
按下其中一个加载的按钮，您将看到通知
再次按“加载列表”
按下其中一个加载的按钮，您将收到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在成功事件上触发多个

1 个答案: