Javascript 如何使用clipboard.js复制动态内容和触发器

单击

.fw code copy按钮后

我想从最近的容器复制源代码。

.fw代码复制按钮

-s是在用户单击专用的“查看源代码”按钮后动态创建的

Html示例按钮：

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

这就是如何触发它的复制事件

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"

但首先，我不想在

数据剪贴板text=“…”

其次，

数据剪贴板文本

用

“…”

作为其值进行定义

如果有人愿意付出一秒钟，我将非常感激

[edit]我已经编写了JSFIDLE进行演示，令人惊讶的是，未捕获的错误消失了，但我仍然需要将

源代码从onClick移到剪贴板范围

触发器是您单击的按钮。获取父对象，然后返回代码块内的文本。您还需要修剪任何前导和尾随空白

演示
这将捕获代码块内的文本，如所包含的示例中所示


新建剪贴板（“.fw代码复制按钮”{
文本：函数（触发器）{
返回$（触发器）.parent（）.find（'code'）.first（）.text（）.trim（）；
}
});
.fw代码副本{
显示：块；
位置：相对位置；
宽度：400px；
高度：30px；
背景：#FFE；
边框：薄实线#FF0；
边缘底部：0.5em；
填充：0.5em；
}
.fw代码复制按钮{
位置：绝对位置；
顶部：8px；
右：8px；
填充：0.25em；
边框：薄实线#777；
背景#800080；
颜色：#FFF；
}
.fw代码复制按钮：悬停{
边框：薄实线#DDD；
背景:#992699；
光标：指针；
}

复制
link rel=“stylesheet”href=“style-1.css”
复制
link rel=“stylesheet”href=“style-2.css”
复制
link rel=“stylesheet”href=“style-3.css”
根据您的原始代码：

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

你能发布一个提琴吗？好的，我现在就写一个提琴，因为我粘贴的代码片段在原始代码中使用了很多依赖项。我相信你可以在元素上有data属性，也可以在
剪贴板
实例上定义为方法，但不能两者都有。我会删除该属性。@xxxmatko我已经添加了JSFIDLE进行演示。我已经运行了FIDLE，没有看到任何错误。是的。我将完全删除
documentonclick
，并使用trigger元素以源代码为目标。这是目前为止最好的答案，就这样。在我的项目中进行了测试，目前正在运行。谢谢
 new Clipboard(".fw-code-copy-button", {
  text: function(trigger) {
    return $(trigger).closest(".fw-code-copy").next("code").text(); 
  }
});