Question

希望得到一些帮助，这些帮助一直困扰着我好几个小时。我不是100％熟悉Javascript / jQuery但是我可以尝试使用一些模板/示例来构建内容。刚才我有一个使用bootstrap填充表的数据库和html站点。我希望为表中的每个条目实现“复制到剪贴板”按钮。

使用最新版本的ZeroClipboard（v2.2），我发现很难创建javascript来应对多个按钮。从ZeroClipboard提供的基本示例开始，我尝试将其改为工作，但发现它无法使用多个按钮。我已将id字段设置为从数据库生成的数据，但即使更改此静态值仍然不适合我。

我现在完全迷失了，并在网络上尝试了很多不同的选项，我甚至不记得这个例子以及我尝试使用不同的例子。

任何帮助都可以节省我数小时的繁琐故障排除。

干杯

以下代码段：

HTML：

<html>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/dist/ZeroClipboard.js"></script>
<script src="js/main.js"></script>
<body>
<tbody>
<tr >
<td>{{data.userdata1}}</td>
<td><button id="{{data.userdata2}}" data-clipboard-text="{{data.userdata2}}">Copy to clipboard</button></td>
</tr>
</tbody>
</body>
</html>

尝试将ID更改为但仍然没有：

<td><button id="{{data.userdata2}}_copy" data-clipboard-text="{{data.userdata2}}">Copy to clipboard</button></td>

<td><button id="copy-text" data-clipboard-text="{{data.userdata2}}">Copy to clipboard</button></td>

使用Javascript：

// main.js

// var client = new ZeroClipboard( document.getElementById("copy-text") );
var client = new ZeroClipboard($(".copy"));

client.on( "ready", function( readyEvent ) {
// alert( "ZeroClipboard SWF is ready!" );

client.on( "aftercopy", function( event ) {
// `this` === `client`
// `event.target` === the element that was clicked
// event.target.style.display = "none";
    // alert("Copied text to clipboard: " + event.data["text/plain"] );
  } );
} );

ZeroClipboard具有动态ID的多个按钮

0 个答案: