javascript - How to make ZeroClipboard work with a single click? -

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

what want copy data clipboard based on block clicked. works fine. problem need click on block, move cursor away block, click again , data gets copied. understand maybe because of area turning flash object.

but want copy data in 1 click only(the first time). kindly suggest way out !!

here 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 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> 

once clip has been created , assigned span in question click on produces desired result. have tried putting contents of copytocb() function in 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 ready action.");});  }) 

also: leave out onclick="copytocb(this)" on spans themselves. should not necessary since overlaying flash movie click event itelf (hopefully).

just tested this. @ given examples of page.

2. edit: clipboard-texts can generated dynamically setting appropriate mouseoverevent on underlying spans like

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

i tried using mousedown on same elements did not work, because clip-event triggered before mousedown event of span.