I am implementing zeroclipboard functionality in one of my projects using twitter bootstrap framework. My problem is that the code works well under one page but the same code does not work on the other. Although both the page have same header and footer i.e both use same jquery and css. The two page are actually loaded under two different tabs.
Any help will be really appreciated.
The code is
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="ZeroClipboard.js"></script>
<script type="text/javascript">
$(function() {
setTimeout(function() {
//create client
var clip = new ZeroClipboard.Client();
//event
clip.addEventListener('mousedown',function() {
clip.setText(document.getElementById('box-content').value);
});
clip.addEventListener('complete',function(client,text) {
alert('copied: ' + text);
});
//glue it to the button
clip.glue('copy');
}, 2000);
});
<body>
<textarea name="box-content" id="box-content" rows="5" cols="70">
Sample text to test clipboard functionality
</textarea>
<p><input style="width:100px; height:40px;" type="button" id="copy" name="copy" value="Copy Text" /></p>
</body>
</html>
