【问题标题】：How to copy using clipboard.js with dynamic content and triggers如何使用带有动态内容和触发器的 clipboard.js 进行复制
【发布时间】：2015-11-17 12:55:47
【问题描述】：

点击.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 移动到剪贴板范围。

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

【问题讨论】：

你能发个小提琴吗？
好的，我现在就写一个小提琴，因为我粘贴的代码片段在原始代码中使用了很多依赖项。
我相信您既可以在元素上拥有 data 属性，也可以在 Clipboard 实例上定义为方法，但不能同时使用两者。我会删除该属性。
@xxxmatko 我已经添加了 jsfiddle 进行演示。
我已经运行了小提琴，我没有看到任何错误。

标签： javascript jquery clipboard zeroclipboard clipboard.js

【解决方案1】：

根据你原来的代码：

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

【讨论】：

就是这样。在我的项目中测试，它现在正在工作。谢谢

【解决方案2】：

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

演示

这会在您包含的示例中抓取代码块内的文本

new Clipboard(".fw-code-copy-button", {
  text: function(trigger) {
    return $(trigger).parent().find('code').first().text().trim();
  }
});

.fw-code-copy {
  display: block;
  position: relative;
  width: 400px;
  height: 30px;
  background: #FFE;
  border: thin solid #FF0;
  margin-bottom: 0.5em;
  padding: 0.5em;
}
.fw-code-copy-button {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 0.25em;
  border: thin solid #777;
  background: #800080;
  color: #FFF;
}
.fw-code-copy-button:hover {
  border: thin solid #DDD;
  background: #992699;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.3/clipboard.min.js"></script>

<span class="fw-code-copy">
  <span class="fw-code-copy-button">Copy</span>
  <code>&lt;link rel=&quot;stylesheet&quot; href=&quot;style-1.css&quot;&gt;</code>
</span>
<span class="fw-code-copy">
  <span class="fw-code-copy-button">Copy</span>
  <code>&lt;link rel=&quot;stylesheet&quot; href=&quot;style-2.css&quot;&gt;</code>
</span>
<span class="fw-code-copy">
  <span class="fw-code-copy-button">Copy</span>
  <code>&lt;link rel=&quot;stylesheet&quot; href=&quot;style-3.css&quot;&gt;</code>
</span>

【讨论】：

是的。我将完全删除document onclick 并使用触发元素定位源。这是目前为止最好的答案。