2

Estou a tempo tendo problemas nos eventos do jQuery. Já utilizei de todas as práticas recomendadas para barrar o duplo evento de click. Segue exemplos:

.off()
e.preventDefault();
e.stopPropagation();
unbid('click');

Sempre quando tem um click eu efetuo essa função

function LoadingTela(botao,tipo) {
     if (tipo == true) {
       $(botao).prop("disabled", true); 
       $('.mask-loading').show(); 
     }else { 
       $(botao).prop("disabled", false); 
       $('.mask-loading').hide(); 
     } 
 }

Alguém chegou a alguma solução ou novo controle de evento?

2
  • Parece que seu evento está sendo chamado duas vezes, o .off vc disse que usou, foi na hora de criar o evento? Por exemplo, tente fazer $("#botao").off("click").on("click",function(){ /*suas coisas aqui*/ }); para evitar que ele seja criado duas ou mais vezes. Caso isso não funcione você pode tentar algo mais complexo, algo como salvar no seu botão quando ele for clicado e só permitir clicks novamente depois de, digamos, 1 segundo. Se precisar posso te montar um exemplo. 6/06/2018 às 12:04
  • function LoadingTela(botao,tipo) { if (tipo == true) { $(botao).prop("disabled", true); $('.mask-loading').show(); } else { $(botao).prop("disabled", false); $('.mask-loading').hide(); } } 6/06/2018 às 12:32

1 Resposta 1

0

Você pode tentar com a função one do jQuery. Ela é semelhante à função on, com a diferença que o evento é removido do elemento apenas sua primeira execução, ou seja, para o exemplo abaixo a função no evento click será executada apenas uma vez.

$('#btn').one('click', event => {
  console.log('Botão pressionado');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Pressione-me!</button>

Se for possível que o evento seja disparado múltiplas vezes na mesma página e a intenção seja somente proteger de múltiplos cliques simultâneos, você pode desabilitar o botão (ou elemento que dispara o evento) enquanto estiver processando a aplicação:

$('#btn').on('click', function(event) {
  $(this).prop('disabled', true);
  console.log('Botão pressionado');
  
  // processando o evento click...
  
  $(this).prop('disabled', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Pressione-me!</button>

5
  • Porem este botão sera executado novamente na mesma tela, pela aplicação estar baseada em ajax, tem como renovar este btn sem atualizar a pagina ? 6/06/2018 às 11:48
  • Utilizei esse controle de desabilitar o botão mais sempre no segundo click a minha function que esta sendo chamada duas vezes, pode ter ficado algum resquício do evento na pagina para ele ser disparado duas vezes ? 6/06/2018 às 12:17
  • @Guilhermezio consegue fazer um Exemplo Mínimo, Completo e Verificável?
    – Woss
    6/06/2018 às 12:18
  • Utilizo sempre quando clico essa função function LoadingTela(botao,tipo) { if (tipo == true) { $(botao).prop("disabled", true); $('.mask-loading').show(); } else { $(botao).prop("disabled", false); $('.mask-loading').hide(); } } 6/06/2018 às 12:33
  • editado a pergunta com o exemplo 6/06/2018 às 16:00

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 .