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

Я не мог заставить это работать на моем сервере, я загрузил ZeroClipboard.swf с сайта zclips и не работал. Я заметил, что swf на zclips сайте не тот, который они используют для своих примеров. Поэтому я создал гиперссылку на http://www.steamdev.com/zclip/js/ZeroClipboard.swf и нажал "сохранить ссылку как", сравнив размер с тем, который я скачал изначально, и он стал больше. Поэтому я поместил новый по ссылке выше на мой сервер, и он работал отлично.

Я думаю, что если вы скачали SWF с сайта zclips непосредственно по их ссылке для скачивания, это ваша проблема, так как она была моей. Попробуйте сохранить мою ссылку в виде файла, а затем загрузить ее на свой сервер.

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