使用ClipboardJS和jQuery实现优惠券复制时的文本回显异常问题

API 探路者

2026-5-8

解决多优惠券按钮复制后文本恢复错误的问题

我明白你遇到的困扰了——当页面存在多个优惠券按钮时，复制完成后恢复的文本总是第一个优惠券的码，这是因为你在恢复文本时的元素选择逻辑出了问题。

问题根源

你原本的setTimeout回调里写了这样的代码：

$('.coupon_clipper').closest('.coupon_clipper').attr('data-clipboard-text')

这里的$('.coupon_clipper')会选中页面上所有带coupon_clipper类的按钮，再调用closest（其实完全没必要，因为元素本身就是目标按钮），最终只会取第一个匹配元素的data-clipboard-text值，所以不管点击哪个按钮，恢复的都是第一个优惠券码。

修复方案

其实ClipboardJS的success事件对象里，e.trigger就是当前被点击的那个按钮元素，我们直接从它身上获取对应的data-clipboard-text值就可以了，不需要去全局查找元素。

修改后的JavaScript代码如下：

var cClip = new ClipboardJS('.coupon_clipper');
cClip.on('success', function(e) {
  $(e.trigger).text('Clipped');
  e.clearSelection();
  setTimeout(function() {
    // 直接从当前触发元素获取自身的data属性
    $(e.trigger).text($(e.trigger).attr('data-clipboard-text'));
    // 或者用jQuery的data方法更简洁：
    // $(e.trigger).text($(e.trigger).data('clipboard-text'));
  }, 250);
});