带有php和多个元素的Zeroclipboard

所以我有一个网页上的多个元素，我希望能够被复制。 元素由php输出，具体取决于API发回的内容。我已经试了两天让它工作，但我似乎看不出我的代码有什么问题

这是代码，所有不重要的东西都去掉了

<script src="js/vendor/modernizr-2.8.3.min.js"></script>
<script type="text/javascript" src="js/ZeroClipboard.js"></script>
<script src="js/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/sweetalert.css">
<script type="text/javascript">

var clipboard = new ZeroClipboard(document.getElementById("copy"));

clipboard.on("ready", function(readyEvent) {
    clipboard.on("aftercopy", function(event) {
      sweetalert({
          title: "See you soon!",
          text: "Copied " + event.data["text/plain"],
          type: "success",
          showConfirmButton: false,
          timer: 2000
      });
    });
});
</script>

  <?php
    echo "<button class='btn btn-success' id='copy' data-clipboard-text='". $element ."'><i class='fa fa-copy'> </i> Copy</button>";
  ?>

var clipboard=新的零剪贴板（document.getElementById（“复制”）；
剪贴板。打开（“就绪”，函数（readyEvent）{
剪贴板。打开（“后拷贝”，函数（事件）{
甜心({
标题：“再见！”，
文本：“复制的”+事件数据[“文本/普通”]，
键入：“成功”，
showconfixton:false，
计时器：2000
});
});
});
不能使用PHP，请使用如下javascript：

function ClipBoard(id) {
    youobj = document.getElementById(id);
    holdtext.innerText = youobj.innerText;
    therange = holdtext.createTextRange();
    therange.execCommand("RemoveFormat"); 
    therange.execCommand("Copy");
}

好的，所以我可以修复这个！这比我想象的要容易得多。我为每个我想要复制的元素使用了一个类，但是我仍然为每个元素使用相同的ID&包括数据剪贴板文本标记。最后的代码如下所示

//This Will load the lib
<script src="js/zeroclipboard.js"></script>
//This is the script. I should probably but it in its own .js file.
<script>
//Loading it with the document ready function meant that I wont have any
//Errors to do with the initialization of it.
  $(document).ready(function() {
//This makes a new var called clipboard and it will look for the class called "copyclass".
//If you try to find elements via ID it will not be able to because you can only
//use ID's with the same name once.
    var clipboard = new ZeroClipboard($('.copyclass'));

      clipboard.on("ready", function(readyEvent) {
        clipboard.on("aftercopy", function(event) {
//Simple JS alert.
          alert("Worked!");
        });
      });
    });
</script>

<?php
//The data which is sent to be used for the clipboard is then dyncamically assigned using
//PHP for the data-clipboard-text.
echo  "<td><button class='copyclass' id='copy' data-clipboard-text='". $element ."'><i class='fa fa-copy'> </i> Copy</button> </td>";
?>

//这将加载库
//这是剧本。我可能应该这样做，但它在自己的.js文件中。
//用documentready函数加载它意味着我不会有任何
//与初始化有关的错误。
$（文档）.ready（函数（）{
//这将生成一个名为clipboard的新变量，它将查找名为“copyclass”的类。
//如果您试图通过ID查找元素，它将无法找到，因为您只能
//使用相同名称的ID一次。
var clipboard=新的零剪贴板（$（'.copyclass'）；
剪贴板。打开（“就绪”，函数（readyEvent）{
剪贴板。打开（“后拷贝”，函数（事件）{
//简单JS警报。
警惕（“工作！”）；
});
});
});
零剪贴板仍然是唯一或多或少可靠的方法。新的html5 clicpboard api的实现仍然不够可靠，无法使用它。但是请注意，zero clipboard要求在客户端浏览器中安装flash，这一频率越来越低。此外，它还使用了一个可能在当天关闭的安全缺口…那么flash电影是否放置在按钮上方？您可以通过右键单击按钮进行检查。此外，您还应该检查浏览器开发控制台是否存在任何javascript错误。哦，我刚才看到的另一件事是：您显然没有在按钮定义中注入
$element
值。这可能会破坏标记，具体取决于内容。如何将flash影片放置在按钮上？初始化元素时，它（应该）由zeroclipboard按钮完成。如果没有，为什么它不工作？您的浏览器中可能没有安装flash？还可以尝试将
剪贴板
变量转储到javascript控制台中，以查看初始化是否有效。