Copy to Clipboard only works after the second click on the button in my script. I'm using ZeroClipboard. See here:
<head>
<title>Gerador de Short URL</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.form.js" type="text/javascript"></script>
<!--script src="short.js" type="text/javascript"></script-->
<script>
$(document).ready(function(){
$('<img src="ajax-loader.gif"/>');
$('#btnEnviar').click(function(){
if($('input[name=url]').val() != "") {
var loader = 'ajax-loader.gif';
var span_img = '<img src="'+loader+'" />';
$('#resposta').html(span_img);
$('#formShort').ajaxForm({
success: function(data) {
if(data.sucesso == true){
$('#resposta').empty();
$('#resposta').append('<input type="text" name="shorturl" id="shorturl" value="' + data.msg + '"/></br></br><label>Link para teste: </label><a target="_blank" href="'+ data.msg +'">' + data.msg + '</a></br></br><input type="button" id="copy" name="copy" value="Copiar link" />');
$('#formShort input[name=url]').val('');
$('#shorturl').select();
}
else{
$('#resposta').html(data.msg);
}
},
error : function(){
$('#resposta').html('Erro ao enviar requisição!');
},
dataType: 'json',
url: 'short_url.php'
}).submit();
} else {
$('#resposta').html('Por favor, informe a URL para o encurtamento!');
}
});
});
</script>
<script src="ZeroClipboard.js" type="text/javascript"></script>
<link rel='stylesheet' href='style.css' type='text/css'/>
<link rel="shortcut icon" href="http://www.wkimob.com.br/wp-content/themes/RealEstast/assets/img/icon/favicon.ico" type="image/x-icon" />
</head>
<body>
<div class="geral">
<div class="header">
<a target="_blank" href="https://bitly.com/u/walkernolasco">Lista de links</a>
</div>
<div class="content">
<table align="center" width="100%" border="0">
<tr>
<td>
<table align="center" border="0">
<tr>
<td>
<fieldset>
<legend>Gerador de Short URL</legend>
<form name="formShort" id="formShort" method="post">
<label>Informe a URL: </label>
<input type="text" name="url" id="url" /><br><span class="exemplo"><i>Exemplo: http://www.dominio.com.br</i></span></br></br>
<input type="button" name="btnEnviar" id="btnEnviar" value="Encurtar URL" /></br></br>
</form>
</fieldset>
</td>
</tr>
<tr>
<td>
<fieldset>
<legend>Short Link</legend>
<div id="resposta"></div>
</fieldset>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="footer">
<table align="center" width="100%" border="0">
<tr>
<td align="center" style="font-size:10px;color:#9b9b9b;">© <?php echo date('Y'); ?> WKImob - Negócios Imobiliários | Todos os direitos reservados | Deus seja louvado. <a href="http://www.wkimob.com.br" target="_blank">www.wkimob.com.br</a></td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#resposta").on('click', '#copy', function(e) {
e.preventDefault();
ZeroClipboard.setMoviePath('http://short.wkimob.com.br/ZeroClipboard.swf');
var clip = new ZeroClipboard.Client();
clip.addEventListener('mousedown', function() {
clip.setText($('#shorturl').val());
});
clip.addEventListener('complete', function(client, text) {
alert('copied: ' + text);
});
clip.glue($('#copy').attr('id'));
});
});
</script>
</body>Whenever I drive the button for Copy Link the first time, nothing happens. It only works after the second click.
Can anyone help me? Hugs and thanks.