Question

我尝试复制到剪贴板按钮，但我不知道为什么我无法做到。我用ajax加载我的页面，所以我调用一个函数，当我鼠标按下按钮时，将zclip添加到我的按钮。但是当我点击它时，什么也没发生。这是我的代码： JS：

<script type="text/javascript" src="<?php echo JS_DIR?>zclip.min.js"></script>
<script type="text/javascript">
    function mouseOver(){
        $('.copyMails').each(function (k,n) {
            console.log("test");
            var copyMails = $(this);
            $(this).zclip({
                path: '<?php echo JS_DIR?>ZeroClipboard.swf',
                copy: function () {
                    var val = $(copyMails).attr('data-clipboard-text'); 
                    return val;
                },
                afterCopy: function () { console.log($(copyMails).data('clipboard-text') + " was copied to clipboard"); }
          });
        });
    }
</script>

我的按钮：

<button onmouseover="mouseOver()" data-clipboard-text="<?php echo implode(',', $emails); ?>" class="copyMails" title="Copier les adresses emails">
    Copier les adresses emails
</button>

提前致谢。

Answer 1

我无法在我的服务器上运行，我从zclips网站下载了ZeroClipboard.swf并且无法正常工作。我注意到zclips网站上的swf并不是他们用于示例的那个。所以我创建了一个指向http://www.steamdev.com/zclip/js/ZeroClipboard.swf的超链接，然后单击了＃34;将链接另存为＆＃34;将尺寸与我原先下载的尺寸进行比较，它的尺寸更大。所以我将上面的链接中的新内容放到我的服务器上，它运行得很好。

我想如果你直接从他们的下载链接下载了zclips网站上的swf，这就是你的问题，因为它是我的。尝试将我的链接保存为文件，然后将其上传到您的服务器。

Answer 2

您的示例中存在错误，至少与提供的内容有关。尝试使用小提琴时，mouseOver函数未定义。

我假设您的意图是在点击按钮时将数据复制到剪贴板，并在触发mouseover事件时设置剪贴板，对吗？如果是这样的话，最好的办法是为此创建一个单独的事件，将其委托给您的按钮类。这样，对于与您的选择器匹配的所有元素，每次元素悬停时，它都不会继续配置剪贴板插件。

这是代码的示例，但我不相信您可以将SWF路径作为外部资源包含在小提琴中，因此它不能完全发挥作用。所以我已经把我觉得很接近的代码版本放在了一起。请试一试。

JSFiddle：http://jsfiddle.net/adx93ave/3/

$(function () {
    $(document).on("mouseover", ".copyMails", function (evt) {
       var $btn = $(this);
       $btn.zclip({
            path: 'http://www.steamdev.com/zclip/js/ZeroClipboard.swf',
            copy: $btn.data("clipboard-text"),
            afterCopy: function () {
                   console.log($btn.data('clipboard-text') + " was copied to clipboard");
            }
        });
    });
  });

zClip不工作 - 多个副本到剪贴板JS

2 个答案: