zClip 不起作用 - 多次复制到剪贴板 JS

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 的超链接，然后单击“链接另存为”，将大小与我最初下载的大小进行比较，发现它更大。因此，我将上面链接中的新链接放到了我的服务器上，它运行良好。

我想如果你直接从他们的下载链接从 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");
            }
        });
    });
  });