How to make ZeroClipboard work with a single click?

Question

I have a working example here http://enginiku.byethost17.com/stack.php

What I want is to copy the data to clipboard based on the block clicked. That works perfectly fine. However the problem is I need to click on the block, move cursor away from the block, click again and only then does the data gets copied. I understand that maybe it is because of the area turning into flash object.

But I want it to copy the data in one click only(the first time). Kindly suggest a way out !!

Here is my script

<script>
function copytocb(el){
var id = $(el).attr('id');
ZeroClipboard.setDefaults({moviePath:'http://enginiku.byethost17.com/ZeroClipboard.swf'});
var clip = new ZeroClipboard($('#'+id));
clip.on('complete',function(client,args){
alert('Copied');
});
}
</script>

And here is the relevant html

<div class="central">
    <div class="maincontent">
        <div class="leftcontent">
            <span id="ss">Some text</span>
        </div>
        <div class="rightcontent">
            <span id="block1" onclick="copytocb(this)" data-clipboard-text="Img1">Img</span>
            <span id="block2" onclick="copytocb(this)" data-clipboard-text="Img2">Img</span>
            <span id="block3" onclick="copytocb(this)" data-clipboard-text="Img3">Img</span>
            <span id="block4" onclick="copytocb(this)" data-clipboard-text="Img4">Img</span>
            <span id="block5" onclick="copytocb(this)" data-clipboard-text="Img5">Img</span>
        </div>
    </div>
</div>

Answer 1

Once the clip has been created and assigned to the span in question the click on it produces the desired result. Have you tried putting the contents of your copytocb() function in the on-document-ready section ($(function(){}))?

Edit:

 $(document).ready(function() {
   ZeroClipboard.setDefaults({moviePath:'http://enginiku.byethost17.com/ZeroClipboard.swf'});
   var DOMarr=$('#rightcontent span').map(function(){return this;});
   var clip = new ZeroClipboard(DOMarr);
   clip.on('load',function(client,args){alert("Clipboard is ready for action.");});
 })

Also: leave out the onclick="copytocb(this)" on the spans themselves. This should not be necessary since the overlaying flash movie will look for the click event itelf (hopefully).

Just tested this. Also look at the given examples of their page.

2. Edit: The clipboard-texts can also be generated dynamically by setting an appropriate mouseoverevent on the underlying spans like

$('#rightcontent span').mouseover(function(){
   var clip.setText($(this).text());
   console.log(clip.options.text); // just to show the effect ...
});

I also tried using mousedown on the same elements but that did not work, because the clip-event will always be triggered before the mousedown event of the span.