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:
Dúvida
- Por que isso acontece somente com o "atalho" definido?
keydown
é utilizado no jQuery, ele é adicionado (e não substituído). Ou seja, toda vez que a páginainc.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çãoonclick
sempre terá apenas um comando e a função será substituída. Não sei se deu para entender (qualquer coisa monto um gif).