1

Cenário teste

index

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <title></title>
    <script type="text/javascript">

        function carregar() {
            $.ajax({
                url: 'inc.php',
                success:function(response){
                    $('#ret').html(response).show();
                },
                error:function(xhr, ajaxOptions, thrownError){
                    console.log(thrownError);
                }
            });
        }
    </script>
</head>
<body>
    <div>
        <button onclick="carregar()">Carregar</button>
    </div>
    <hr>
    <div id="ret"></div>
</body>
</html>

inc.php

<script type="text/javascript">

    $(document).keydown(function (e) {
        if (e.altKey && e.keyCode == 67) {   
            clone();
        }
    });

    function clone() {
        const template = $('#elementos > #el').last();
        const novo = template.clone();
        $('#elementos').append(novo);
    }
</script>
<div>
    <button onclick="clone()">Clonar</button>
    <div id="elementos">
        <p id="el">Elemento</p>
    </div>
</div>

Simulação

O index, tem um botão que chama por Ajax o conteúdo de inc.php, onde tem uma função que clona o elemento com id="el" pelo botão "clonar" ou por atalho de teclas "Alt+C".

O que acontece é que, cada vez que "recarrega" o conteúdo de inc.php pelo botão "carregar" do index, ele adiciona +1 clone somente pelo atalho, mas não pelo botão, como abaixo:

bug


Dúvida

  • Por que isso acontece somente com o "atalho" definido?
3
  • 1. Sempre que o evento keydown é utilizado no jQuery, ele é adicionado (e não substituído). Ou seja, toda vez que a página inc.php for carregada, uma nova ação será adicionada no evento supramencionado. 2. Isso não ocorre com o botão "clonar", pois a função onclick sempre terá apenas um comando e a função será substituída. Não sei se deu para entender (qualquer coisa monto um gif). Commented 21/02/2019 às 0:33
  • Creio que vc inverteu no texto (no título está ok): quem duplica é o atalho e não o botão :D
    – Sam
    Commented 21/02/2019 às 1:10
  • 1
    @Sam verdade! Valeu!! Kkk
    – rbz
    Commented 21/02/2019 às 1:27

1 Resposta 1

2

Isso acontece porque cada vez que você carrega, é criado um novo event listener $(document).keydown na memória, e vai acumulando. No caso do botão isso não ocorre porque ele chama uma função que não duplica no carregamento.

O que você tem que fazer é impedir que o $(document).keydown seja executado a cada carregamento, ou seja, que ele entre apenas 1 vez na memória.

Uma sugestão é criar uma variável (chamei de flag) inicialmente false e colocar o $(document).keydown dentro de um if e alterar o valor da variável para true. Assim, o trecho dentro do if só será executado na primeira vez, evitando duplicar o $(document).keydown:

var flag;

if(!flag){      
   flag = true;
   $(document).keydown(function (e) {
      if (e.altKey && e.keyCode == 67) {   
         clone();
      }
   });
}

function clone() {
   const template = $('#elementos > #el').last();
   const novo = template.clone();
   $('#elementos').append(novo);
}
2
  • Pode testar. Vai funcionar como uma luva. ;?)
    – Sam
    Commented 21/02/2019 às 1:35
  • 100%! Valeuuu! ✌️
    – rbz
    Commented 21/02/2019 às 10:10

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .