Search code examples
jqueryzclip

zclip is not working when i bind that on a hidden element


I want to have a copy button on my website which copies text of a div to the clipboard, since javascript does not have access to clipboard directly therefore, i'm using zclip for that, but when i bind zclip to a hidden element and when i show that element than zclip does not work or bind on that please help me out.

HTML Code:

<span class="homebutton">Get code for this theme</span>
<div class="get_code">
    <pre class="theme_code"><?php echo $theme['theme_code'];?></pre>
    <div class="copy_code">Copy</div>
</div>

jQuery Code:

$('.homebutton').click(function(){
    $('.get_code').show('slow');
});

$('.copy_code').zclip({
    path: "js/ZeroClipboard.swf",
    copy: function(){return $('.theme_code').text();},
    afterCopy: function() {}
});

Thanks in advance!


Solution

  • I've got the solution i tried binding the event on setTimeout function and it worked as i needed.. :)

    I'm sharing that code hope it will help other people!

    HTML code:

    <span class="homebutton">Get code for this theme</span>
    <div class="get_code">
        <pre class="theme_code"><?php echo $theme['theme_code'];?></pre>
        <div class="copy_code">Copy</div>
    </div>
    

    jQuery Code:

    $('.homebutton').click(function(){
        $('.get_code').show('slow');
        setTimeout(function(){bind_zclip();},1000);
    });
    
    function bind_zclip()
    {
        $('.copy_code').zclip({
            path: "js/ZeroClipboard.swf",
            copy: function(){return $('.theme_code').text();},
            afterCopy: function() {}
        });
    }