zClip don't work - multiple copy to clipboard JS

Question

I try to make a copy to clipboard button but I don't know why I can't make it. I load my page with ajax so I call a function to add the zclip to my button when I mouseOver the button. But when I click on it, nothing is happening. Here are my codes: 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>

And my button:

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

Thanks in advance.

Answer 1

There is an error in your example, at least with what's provided. Trying it in a fiddle prouces your mouseOver function being undefined.

I assume your intent is to copy the data to the clipboard when they click the button, and setup the clipboard when the mouseover event is triggered, correct? If that's the case, your best bet would be to create a single event for this, delegating it to your class of button(s). This way, it's not continuing to configure the clipboard plugin, every time an element is hovered over, for all elements matching your selector.

Here's an example of the code, but I don't believe you can include the SWF path as an external resource within the fiddle so it's not fully functional. So I have put together a version of the code I feel is close. Please give it a try.

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

Answer 2

I could not get this to work on my server, I downloaded the ZeroClipboard.swf from zclips website and would not work. I noticed that the swf on zclips website in not the one that they use for their examples. So I created a hyperlink to http://www.steamdev.com/zclip/js/ZeroClipboard.swf and clicked "save link as" compared the size to the one I had downloaded originally and it was bigger. So I put the new one from the link above onto my server and it worked perfectly.

I think if you downloaded the swf from zclips website directly from their download link, this is your problem as it was mine. Try saving my link as a file and then uploading it to your server.