Javascript 具有动态ID的多个按钮_Javascript_Jquery_Html_Database_Zeroclipboard

Javascript 具有动态ID的多个按钮

javascript jquery html database

Javascript 具有动态ID的多个按钮,javascript,jquery,html,database,zeroclipboard,Javascript,Jquery,Html,Database,Zeroclipboard,希望得到一些困扰了我几个小时的帮助。我不是100%熟悉Javascript/jQuery，但是我可以尝试使用一些模板/示例来构建东西。刚才我有一个数据库和html站点，使用bootstrap来填充一个表。我希望为表中的每个条目实现一个“复制到剪贴板”按钮使用最新版本的ZeroClipboard（v2.2），我发现很难创建javascript来处理多个按钮。从ZeroClipboard提供的基本示例开始，我尝试将其修改为可以工作，但发现它不能使用多个按钮。我已将id字段设置为从数据库生成的数据

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

使用最新版本的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>

<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>

// 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"] );
  } );
} );