javascript - 如何使用带有动态内容和触发器的 clipboard.js 进行复制

Question

点击 .fw-code-copy-button 后，我想从最近的容器中复制源代码。.fw-code-copy-button-s 是在用户单击专用的“查看源代码”按钮后动态创建的。

HTML 例如按钮:

<span class="fw-code-copy">
  <span class="fw-code-copy-button" data-clipboard-text="...">copy</span>
</span>

这就是我如何触发点击事件，并定义要复制到剪贴板的源代码:

$(document).on("click", ".fw-code-copy-button", function(){
  var source = $(this).closest(".fw-code-copy").next("code").text();
});

这就是clipboard.js触发它的复制事件

new Clipboard(".fw-code-copy-button", {
  text: function(trigger) {
    return source; // source should somehow be copied from scope above it
  }
});

每当我点击网站上的任何地方时，都会出现以下错误:

Uncaught Error: Missing required attributes, use either "target" or "text"

但首先我不想在 data-clipboard-text="..." 中定义要复制的文本其次，data-clipboard-text 是用 "..." 定义的，因为它是值。

如果有人愿意付钱，我将不胜感激。

[edit] 我已经编写了 jsFiddle 用于演示，令人惊讶的是 UncaughtError 消失了，但我仍然需要将 source 代码从 onClick 移动到 Clipboard 范围。

https://jsfiddle.net/2rjbtg0c/1/

Answer 1

根据您的原始代码:

 new Clipboard(".fw-code-copy-button", {
  text: function(trigger) {
    return $(trigger).closest(".fw-code-copy").next("code").text(); 
  }
});