2

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&ccedil;&atilde;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;">&copy; <?php echo date('Y'); ?> WKImob - Negócios Imobiliários | Todos os direitos reservados | Deus seja louvado.&nbsp;<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.

phts
  • 3,889
  • 1
  • 19
  • 31
Walker Nolasco
  • 21
  • 1
  • Probably your browser is configured to require a click to activate Flash. What browser & OS are you using? To be honest, Flash-based solutions like this are going to have increasingly poor compatibility as Flash is phased out. – beercohol Jun 23 '15 at 18:57
  • Already tested in Chrome, Firefox and IE. My Flash is enabled for the first click... :\ – Walker Nolasco Jun 23 '15 at 19:34
  • I realized that the error occurs because the #copy button is created dynamically. When I put the button directly in html, works. Any idea how to work with #copy button dynamically? – Walker Nolasco Jun 24 '15 at 14:45
  • The jQuery `on` method you're using is correct for binding to dynamically created elements, so I don't think the problem is there. I'm not sure your ZeroClipboard code is correct though, as it looks like you're only attaching to the clipboard after you click the button. Plus the version you're using is quite old. Try updating to v2 from here - http://zeroclipboard.org/ - and look at their samples and docs. – beercohol Jun 29 '15 at 14:22

0 Answers0