using zclip to copy multiple values with multiple copy buttons

Question

I would like to be able copy the value of class attribute, using it's accompanied copy button.

For lack of better phrasing, here's an example:

Currently the copy button only works for one copy button (whichever is first).

How do copy from multiple element, using multiple buttons?

code:

      $(document).ready(function() {
      $('.copylink').zclip({
         path: '/flash/ZeroClipboard.swf',
           copy: function(){ return $(this).attr('data-copy-shorturl'); },
           afterCopy: function()
           {
               console.log($(this).attr('data-copy-shorturl') + " was copied to clipboard");
           }
        });
  }); 

all buttons have the same classes etc:

<button class="copyshortened copylink" data-copy-shorturl="http://litl.it/{{$link->short_url}}">copy</button>

I'm not sure why $(this) in jquery, doesn't seem to work correctly.

Answer 1

I see what you are trying to do, but I think your syntax is a little off.

You are applying zclip like an event rather than as a directive.

Try this

$('.copylink').each(function(){
    $(this).zclip({
        path :  '/flash/ZeroClipboard.swf',
           copy: function(){ return $(this).attr('data-copy-shorturl'); },
           afterCopy: function()
           {
               console.log($(this).attr('data-copy-shorturl') + " was copied to clipboard");
           }
    });
});

---

Update

$('.copylink').each(function(){
    $(this).zclip({
        path :  '/flash/ZeroClipboard.swf',
           copy: function(){ return $(this).attr('data-copy-shorturl'); },
           afterCopy: function()
           {
               console.log($(this).data('copy-shorturl') + " was copied to clipboard");
           }
    });
});

Apparently, the data-copy-shorturl attributes should be accessed via jQuery's data function