jQuery button doesn't work until second click - how do I bind <a> with zClip before first click

Question

a.copy-btn gets zClip attached to it on the first click.

On the second click the contents of < p > (ggg/aaa) gets copied.

I want it to get copied on the first click, and I cant get it working.

<p class="copiedText">ggg</p>
<a class="copy-btn" href="#">a copy button</a><br /><br />

<p class="copiedText">aaa</p>
<a class="copy-btn" href="#">a copy button</a><br /><br />


$(document).ready(function(){
                $('a.copy-btn').click(function(){
                    $(this).zclip({     
                        path:'js/ZeroClipboard.swf',
                        copy:$(this).prev('p.copiedText').text()
                    });
                  });               
              });

I am also open to other solutions entirely. I tried addClass to the < p > before 'copy' is triggered -- and then copying the p.ClassName -- but this didn't work -- I would be interested to know why.

Answer 1

I have never used zclip before, but taking a quick look at the Usage documentation it appears as though you do not need to bind it to a click. So all you should need to get it working is:

$(document).ready(function(){
    $button = $('a.copy-btn');
    $button.zclip({
        path:'js/ZeroClipboard.swf',
        copy:$button.prev('p.copiedText').text()
    });
});

Answer 2

I think you should try this:

$(document).ready(function() {

    $('a.copy-btn').each(function(i) {
        var $this = $(this);
        $(this).zclip({
            path: 'js/ZeroClipboard.swf',
            copy: $this.prev('p.copiedText').text()
        });
    });

});​