ZeroClipboard doesn't work in first click

Question

I'm trying to copy text to clipboard by using ZeroClipboard. It works good, but only in the second click on the button and not in the first click. I saw few solutions in Google but none of them fixed my problem. I tried to put the ZeroClipboard events outside of the click button event, and also to put it inside the $(document).ready(function() and all of this didn't help. Can you please help me solve this problem? Thanks!

$("body").on('click','.copyToClipboard', function (event) {
var clientTarget =  new ZeroClipboard( $("#copy_to_clipboard"), {

        moviePath: "js/ZeroClipboard.swf",
        debug: false
    } );

    $('#copy_to_clipboard').attr('data-clipboard-text', texttocopy);
    alert(texttocopy);
    clientTarget.on( "load", function(clientTarget)
    {
        $('#flash-loaded').fadeIn();

        clientTarget.on( "complete", function(clientTarget, args) {
            clientTarget.setText( args.text );
            $('#data-to-copy-text').fadeIn();


        } );
        alert(args);
    } );

});

Answer 1

I think you need to set up the zero clipboard before you click on it. In your code, you're not setting it up to handle clicks until you actually click on it. You should find all the objects on the page that need to handle clicks and set them up on document ready. something like this:

$(function () {     
    $('.copyToClipboard').zclip({ /* zclip settings */ });
});