无法让 zclip 实际复制到剪贴板，但它似乎正在抓取正确的数据答案

【问题标题】：Can't get zclip to actually copy to the clipboard, yet it seems to be grabbing the right data无法让 zclip 实际复制到剪贴板，但它似乎正在抓取正确的数据
【发布时间】：2014-03-19 14:36:37
【问题描述】：

我有一个网络应用程序，我想添加从...复制 HTML 和文本的功能，将其复制到剪贴板。

所以，我摆弄了 Zeroclipboard，无法让它工作，然后发现它不再被支持/开发。所以，我选择了它的一个分支，称为 Zclip。

我想要一个函数，我可以将两个 div 传递给... 显示“复制文本”的 div/按钮在哪里...以及我们要将文本复制到的目标 div 在哪里。我插入了“警报”来告诉我我得到了多远/尝试调试它。警报表明我们正在将正确的 div / 文本传递给 zclip。但是每次我检查我的剪贴板时，文本都不存在！

在 FF、IE 和 Chrome 上试用。

所以，我开始剥离我的文件以试图解决这个问题。这是我的测试页面：

<html>
<head>
     <script src="js/vendor/jquery-1.10.2.min.js"></script>
    <script src="http://www.steamdev.com/zclip/js/jquery.zclip.min.js"></script>
<script>

 $(document).ready(function(){

    var click_div_id = 'copy_results_table_to_CB';
    var source_div_id = 'results';

        alert("SetCopyableDiv was called for:   click_div_id = " + click_div_id + "     source_div_id to copy = " + source_div_id);

        $('#'+ click_div_id).zclip({
            path: 'http://www.steamdev.com/zclip/js/ZeroClipboard.swf',
            copy: function(){ 
                var text = $('#' + source_div_id).text();
                alert("Copy attempt made.   Text = " + text);
                console.log(text);
                return  text;
            },
            beforeCopy:function(){
            alert("Copy was pressed!");
            },
            afterCopy:function(){
                alert("Done with copy to clipboard!");
            }
        });
}); 

</script>
</head>
<body>

<div id="results" class="results">

<table class="data">
  <tr>
    <th>Entry Header 1</th>
    <th>Entry Header 2</th>
    <th>Entry Header 3</th>
    <th>Entry Header 4</th>
  </tr>
  <tr>
    <td>Entry First Line 1</td>
    <td>Entry First Line 2</td>
    <td>Entry First Line 3</td>
    <td>Entry First Line 4</td>
  </tr>
  <tr>
    <td>Entry Line 1</td>
    <td>Entry Line 2</td>
    <td>Entry Line 3</td>
    <td>Entry Line 4</td>
   </tr>
  <tr>
    <td>Entry Last Line 1</td>
    <td>Entry Last Line 2</td>
    <td>Entry Last Line 3</td>
    <td>Entry Last Line 4</td>
  </tr>
</table>

</div>

<button id="copy_results_table_to_CB">Copy to clipboard?</button>

</body>

我在 http://jsfiddle.net/DR4296/V52eK/ 有一个 JSFiddle

奇怪的是，“复制”警报弹出，然后是“复制前”警报，而“复制后”警报从未出现，这让我觉得有些东西真的令人窒息。

有什么想法吗？

【问题讨论】：

标签： jquery clipboard zclip

【解决方案1】：

删除alert() 中的alert() 处理程序，它应该可以工作：

http://jsfiddle.net/V52eK/2/

$(document).ready(function(){

    var click_div_id = 'copy_results_table_to_CB';
    var source_div_id = 'results';

        $('#'+ click_div_id).zclip({
            path: 'http://www.steamdev.com/zclip/js/ZeroClipboard.swf',
            copy: function(){ 
                var text = $('#' + source_div_id).text();
                //alert("Copy attempt made.   Text = " + text);
                console.log(text);
                return  text;
            },
            beforeCopy:function(){
                //alert("Copy was pressed!");
            },
            afterCopy:function(){
                //alert("Done with copy to clipboard!");
            }
        });
});

【讨论】：

这似乎成功了。知道为什么吗？我对 jQuery 相当陌生，所以我很想知道为什么在其中塞入警报会搞砸它。谢谢！
@DaveyBoy，我认为这是 zclip（不是 jQuery）问题，我检查了它的代码。 “复制”过程是基于鼠标事件（mousedown）的，所以如果您在mousedown处理程序中启动警报，那么似乎其他zclip事件（mouseleave）被触发并且复制过程中止，当然，这只是一个理论，我看不太深。
啊，对不起。我的第一篇文章。我没有看到任何关于此的文字。没有意识到我需要在左边寻找一个图标。谢谢！
谢谢，别担心，我们所有人都有第一篇文章 :-)