Clipboard.js 实现了纯 JavaScript 无 Flash的浏览器内容复制到系统剪贴板的功能

地址如下 

操作起来也挺简单，如果是一个页面一个复制按钮相信按照官网教程就能写好

我也写下来吧

        Copy to clipboard// 引进 clipboard// JQvar clipboard = new Clipboard('.btn');clipboard.on('success', function(e) {   alert('成功');});clipboard.on('error', function(e) {   alert('失败');});

但是有些时候我们同个页面可能需要几个复制功能，在下在此就遇到点坑了

    	
    
		
     
地址1
		
     
我是要复制的内容1
		
     复制地址1	
    
	
    
		
     
地址2
		
     
我是要复制的内容2
		
     复制地址2	
    

// JQ 部分// 这段代码需要两次点击才能触发复制效果，并且多次点击会叠加弹窗//为两个按钮添加自动绑定事件$(".zi-modal a,.ren-modal a").on('click',function(){		var val = $(this).prev().html();		// alert(val);		var zidong_ma = new Clipboard(this,{			 text: function() {		            return val;		        }		});	    zidong_ma.on('success', function(e) { // 复制成功回调函数	        console.log(e);	        alert('已添加至粘贴板。')	    });	    zidong_ma.on('error', function(e) { //复制失败回调函数	        console.log(e);	        alert('复制失败,请重试。')	    });})

造成原因我是这样认为的

每次绑定的时候都会将 Clipboard 重新实例化，然而之前实例化成功的对象并没有销毁，所以这个方式

貌似行不通

然后再看文档 

里边的这段

        Copy to clipboard

说明 Clipboard 默认会将  data-clipboard-text 这个属性的值放到粘贴板

所以我们只需要改变 data-clipboard-text 的值就可以了

所以上面的代码改为

// 点击复制地址，只实例化一次即可 var ren_ma = new Clipboard('.ren-modal > a'),     //动态变化的是需要复制的值$('.ren-modal > a').click(function () {	  var copyText1 = $(this).siblings('.copy-dizhi').text();	  $(this).attr('data-clipboard-text', copyText1);	})	 ren_ma.on('success', function(e) {   alert('成功');});ren_ma.on('error', function(e) {   alert('失败');});

github 上面的似乎太过复杂

附上单个的 js