jQuery, How to create a copy button?

Question

I am working on this structure:

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.zclip.js"></script> 
<script language="JavaScript">
    var clip = new ZeroClipboard.Client();
    var myTextToCopy = "Hi, this is the text to copy!";
    clip.setText(myTextToCopy);
    clip.glue('d_clip_button');
</script>
<div id="d_clip_button" style="border:1px solid black; padding:20px;">Copy To Clipboard</div>

but it doesn't work, need your help to figure this out. thanks in advance!

From the [jQuery tutorial](http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery): *"As almost everything we do when using jQuery reads or manipulates the document object model (DOM), we need to make sure that we start adding events etc. as soon as the DOM is ready. To do this, we register a ready event for the document."*. Also have a look at [this question](http://stackoverflow.com/q/14028959/218196). — Felix Kling, Mar 14 '13 at 08:33
possible duplicate of [jQuery ZeroClipboard, copy button](http://stackoverflow.com/questions/15404955/jquery-zeroclipboard-copy-button) — andyb, Mar 14 '13 at 10:31

score 0 · Answer 1 · answered Mar 14 '13 at 08:27

0

Enclose your jquery code in a document.ready() handler.

$(document).ready(function() {
                var clip = new ZeroClipboard.Client();
                var myTextToCopy = "Hi, this is the text to copy!";
                clip.setText( myTextToCopy );
                clip.glue( 'd_clip_button' );
});

So as to wait for the DOM to be loaded so your #d_clip_button element is present when accessing it from jquery.

answered Mar 14 '13 at 08:27

Nelson

49,283
8
68
81

2

@Ray: Are you sure `ZeroClipboard.Client` actually exists? Which library are you using? If it is [this one](http://www.steamdev.com/zclip/) then it looks like it is initialized differently. – Felix Kling Mar 14 '13 at 08:37
1

@Nelson the OP has asked a [duplicate question](http://stackoverflow.com/questions/15404955/jquery-zeroclipboard-copy-button) now. Voted to close this question. – andyb Mar 14 '13 at 10:34

jQuery, How to create a copy button?

1 Answers1