Initialization problem and using instances in jquery

I am using ZeroClipboard plugin and using this code at the beginning

$(document).on('click', '.submit', function() {
            //reset others
            $('.submit').text('Copy');
            ZeroClipboard.config({
                moviePath: clipper_params.templateurl +
                    '/includes/js/zeroclipboard/ZeroClipboard.swf'
            });
            var clip = new ZeroClipboard($(this));
            clip.on('complete', function(client, args) {
                $(this).text('Copied');
            });  

      

        
        
        
      

    

It works, but I have to double click. So I guess it was an initialization issue, I move the instance initialization into the document as shown below. But now it doesn't seem to be able to be called. Why?

$(document).ready(function() {
    ZeroClipboard.config({
        moviePath: clipper_params.templateurl +
            '/includes/js/zeroclipboard/ZeroClipboard.swf'
    });
    clip = new ZeroClipboard($('.submit'));
});
$(document).on('click', '.submit', function() {
    //reset others
    $('.submit').text('Copy');
    clip.on('complete', function(client, args) {
        $(this).text('Copied');
    });
});