o evento click () está chamando duas vezes no jquery

113

Eu configurei um elemento de link e chamei seu evento click no jquery, mas o evento click está chamando duas vezes, por favor veja abaixo o código do jquery.

$("#link_button")
.button()
.click(function () {
   $("#attachmentForm").slideToggle("fast");
});

Por favor informar.

Obrigado.

domlao
fonte
2
O problema provavelmente está em algum outro lugar do seu script.
karim79
3
se você não consegue encontrar onde você fez coisas para chamar isto duas vezes, faça um desligamento ('clik') antes do clique (...).
regilero
regilero: exatamente, toda a base de código é muito grande. onde devo colocar essa desconexão?
domlao
2
você pode detectar quais funções estão vinculadas a esse evento de clique: stackoverflow.com/questions/570960/…
Anh Pham

Respostas:

229

Certifique-se e verifique se você não incluiu acidentalmente seu script duas vezes em sua página HTML.

Scott
fonte
1
Esse foi o problema do meu caso. Que meu evento de clique estava ficando borbulhado. Obrigado pelo ponteiro. :) +1
Tahir Akram,
22
Eu apenas olhei para esta solução e ri pensando "Eu não sou estúpido o suficiente para fazer isso" ... Acontece que eu fiz exatamente isso. Muito obrigado.
JazzyP
1
Obrigado! Isso acabou sendo o problema para mim também. Tinha em um template de lâmina laravel e em um template aninhado que chamava @parent no mesmo nome de seção. Opa. Obrigado novamente!
Phillip Harrington
1
Obrigado por esta dica. Lutei com isso por mais de 20 horas, e essa dica me levou ao caminho certo. Eu estava usando o MVC ScriptBundles, mas também estava vinculando os arquivos de script diretamente e isso duplicou os eventos
Manish
rsrs ... Já estive lá ... estava colocando a culpa no terceiro, mas fui eu quem vinculou o arquivo .js duas vezes.
Juliano
76

Faça desassociar antes do clique;

$("#link_button").unbind('click');
$("#link_button")
.button()
.click(function () {
   $("#attachmentForm").slideToggle("fast");
});
O sistema
fonte
1
tente $ ("# link_button"). unbind (); ou faça um teste simples para verificar quantas vezes esse código é lido, se mais de uma vez ...
TheSystem
3
isso é apenas consertar o erro rapidamente a cada vez, não é uma solução real. ele resolve o problema e me ajudou, mas você deve encontrar o problema real e fazer uma correção permanente.
Juan Ignacio
1
é muito útil no meu caso, porque preciso chamar várias vezes os métodos com meus eventos depois de algumas chamadas de ajax que começa a ser overclicked (não sei se essa palavra existe). Para minha situação, significa uma solução.
Thiago C. S Ventura
Corrigido meu problema com um script que só foi incluído uma vez. Obrigado!
K. Rhoda
49

Isso significa que seu código incluiu o script jquery duas vezes. Mas tente isto:

$("#btn").unbind("click").click(function(){

//your code

});
Nalan Madheswaran
fonte
36

Eu tentei e.stopImmediatePropagation(),; Isso parece funcionar para mim.

Aps18
fonte
@ BasheerAL-MOMANI Consulte stackoverflow.com/questions/5299740/…
fangxing
Obrigado, é trabalho ... a propósito, depois de ler, entendo que ele impede que qualquer manipulador pai seja executado
Nandlal Ushir
18

No meu caso, usei o script abaixo para resolver o problema

$('#id').off().on('click',function(){
    //...
});

off()desassocia todos os eventos vinculados #id. Se você deseja desvincular apenas o clickevento, use off('click').

Upendra
fonte
8

Basta chamar .off () antes de chamar .on ().

Isso removerá todos os manipuladores de eventos:

$(element).off().on('click', function() {
// function body
});

Para remover apenas manipuladores de eventos de 'clique' registrados:

$(element).off('click').on('click', function() {
// function body
});
Srinivas
fonte
7

Uma solução bastante comum para o problema de dois cliques é colocar

e.stopPropagation()

no final de sua função (supondo que você use function(e)isso). Isso evita que o evento borbulhe, o que pode levar a uma segunda execução da função.

demongolem
fonte
6

Eu tive o mesmo problema, mas você pode tentar alterar este código

$("#link_button")
.button()
.click(function () {
   $("#attachmentForm").slideToggle("fast");
});

para isso:

$("#link_button").button();
$("#link_button").unbind("click").click(function () {
   $("#attachmentForm").slideToggle("fast");
});

Para mim, esse código resolveu o problema. Mas tome cuidado para não incluir acidentalmente o script duas vezes na página HTML. Acho que se você estiver fazendo essas duas coisas corretamente, seu código funcionará corretamente. obrigado

Ellington Brambila
fonte
3

por favor tente isso

$('#ddlSupervisor').live('change', function (e) {
    if (e.handled !== true) { //this makes event to fire only once
    getEmployeesbySupervisor();
    e.handled = true;
   }
});
Raj
fonte
Mudei "ao vivo" para "ligado" e parece funcionar para mim. Portanto, o evento é disparado apenas quando o botão é clicado.
Vikneshwar
Este é o local certo.
LargeTuna de
3

Este é definitivamente um bug, especialmente quando é FireFox. Eu pesquisei muito, tentei todas as respostas acima e finalmente descobri como bug por muitos especialistas em SO. Então, eu finalmente tive essa ideia declarando uma variável como

var called = false;
$("#ColorPalete li").click(function() {
    if(!called)
    {
             called = true;
             setTimeout(function(){ //<-----This can be an ajax request but keep in mind to set called=false when you get response or when the function has successfully executed.
                 alert('I am called');
                 called = false;
             },3000);

    }
});

Desta forma, ele primeiro verifica se a função foi chamada anteriormente ou não.

Arejado
fonte
3

Adicionar e.preventDefault();no início da minha função funcionou para mim.

Chris Edwards
fonte
3

Esta é uma questão mais antiga, mas se você estiver usando a delegação de eventos, foi isso que a causou.

Depois de removê- .delegate-twolo, a execução parou duas vezes. Acredito que isso aconteça se os dois delegados estiverem presentes na mesma página.

$('.delegate-one, .delegate-two').on('click', '.button', function() {
    /* CODE */
});
EternalHour
fonte
2

este trecho de código não contém nada de ruim. É outra parte do seu script, como disse @karim

gênese
fonte
2

No meu caso, estava funcionando bem no Chrome e o IE estava ligando .click()duas vezes. se esse era o seu problema, corrigi-lo com return false, após chamar o .click()evento

   $("#txtChat").keypress(function(event) {
        if (event.which == 13) {
            $('#btnChat').click();
            $('#txtChat').val('');
            return false;
        }
    });
Sebastian castaldi
fonte
2

Ligar unbindresolveu meu problema:

$("#btn").unbind("click").click(function() {
    // your code
});
Deepti Gehlot
fonte
2

Não tenho certeza do porquê, mas tive esse problema com

$(document).on("click", ".my-element", function (e) { });

Quando mudei para

$(".my-element").click(function () { });

O problema foi resolvido. Mas definitivamente algo errado no meu código.

Petr
fonte
isso funcionou para mim em laravel, não sei a causa desse problema
khan Farman
1

Fui enganado por uma seleção que combinava vários itens, então cada um foi clicado. :firstajudou:

$('.someClass[data-foo="'+notAlwaysUniqueID+'"]:first').click();
Martin
fonte
1

Eu também tive esse problema no FF. Minha etiqueta, entretanto, estava ligada a uma <a>etiqueta. Embora a <a>etiqueta não fosse a lugar nenhum, ainda deu um clique duplo. Troquei a <a>tag por uma <span>tag e o problema do clique duplo desapareceu.

Outra alternativa é remover o atributo href completamente se o link não levar a lugar nenhum.

Sadiki Latty
fonte
Isso realmente não responde à pergunta. Se você tiver uma pergunta diferente, poderá fazê-la clicando em Fazer pergunta . Você também pode adicionar uma recompensa para chamar mais atenção para esta questão, uma vez que você tenha reputação suficiente .
Sean Patrick Floyd
@SeanPatrickFloyd: Na verdade, é uma resposta. Mesmo se formulado para levantar bandeiras vermelhas.
Deduplicator
1

Enfrentei esse problema porque meu $(elem).click(function(){});script foi colocado embutido em um div que foi definido como style="display:none;".

Quando a exibição css foi alterada para block, o script adicionaria o ouvinte de evento uma segunda vez. Mudei o script para um arquivo .js separado e o ouvinte de evento duplicado não foi mais iniciado.

NRTRX
fonte
1

Quando uso esse método na página de carregamento com jquery, escrevo $('#obj').off('click');antes de definir a função de clique, para que a bolha não ocorra. Funciona para mim.

GustavoAdolfo
fonte
1

Minha resposta simples foi transformar o click bind em uma função e chamá-la a partir do onclick do elemento - funcionou muito bem! Considerando que nenhuma das opções acima

Steve Whitby
fonte
0

Se o seu evento estiver chamando duas ou três vezes, ou mais, isso pode ajudar.

Se você estiver usando algo assim para acionar eventos ...

$('.js-someclass').click();

… Então preste atenção ao número de .js-someclasselementos que você tem na página, porque isso acionará o evento de clique para todos os elementos - e não apenas uma vez!

Uma solução simples é certificar-se de que você acionou o clique apenas uma vez, selecionando apenas o primeiro elemento , por exemplo:

$('.js-someclass:first').click();
Fabien Snauwaert
fonte
0

Claro que em algum outro lugar em seu (s) script (s) o evento "click" está sendo vinculado novamente ao mesmo elemento, como várias outras respostas / comentários estão sugerindo.

Tive um problema semelhante e para verificar isso, simplesmente adicionei um console.logcomando ao meu script, como no seguinte snippet:

$("#link_button")
    .button()
    .click(function () {
        console.log("DEBUG: sliding toggle...");
        $("#attachmentForm").slideToggle("fast");
    });

Se, ao clicar no botão, você obtiver algo semelhante à imagem abaixo no console do desenvolvedor do seu navegador (como eu fiz), então você sabe com certeza que o click()evento foi vinculado duas vezes ao mesmo botão.

o console do desenvolvedor

Se você precisar de um patch rápido, a solução proposta por outros comentaristas de usar o offmétodo (btw unbindestá obsoleto desde o jQuery 3.0) para desvincular o evento antes de (re) vinculá-lo funciona bem, e eu a recomendo também:

$("#link_button")
    .button()
    .off("click")
    .click(function () {
        $("#attachmentForm").slideToggle("fast");
    });

Infelizmente, este é apenas um patch temporário! Uma vez que o problema de fazer seu chefe feliz for resolvido, você deve realmente cavar um pouco mais em seu código e corrigir o problema da "ligação duplicada".

A solução real depende, é claro, do seu caso de uso específico. No meu caso, por exemplo, houve um problema de "contexto". Minha função estava sendo invocada como resultado de uma chamada Ajax aplicada a uma parte específica do documento: recarregar todo o documento era, na verdade, recarregar os contextos de "página" e "elemento", resultando no evento sendo vinculado ao elemento duas vezes .

Minha solução para este problema foi a alavancar o jQuery uma função, que é o mesmo que no com a ressalva de que o evento é automaticamente desacoplado após a sua primeira chamada. Isso era ideal para meu caso de uso, mas, novamente, pode não ser a solução para outros casos de uso.

Sal Borrelli
fonte
-1

Tive o mesmo problema. Isso funcionou para mim -

$('selector').once().click(function() {});

Espero que isso ajude alguém.

SGhosh
fonte
Lança um erro para mim ... Além disso, é uma solução suja - a função está sendo executada mais de uma vez, a solução é colocá-la em outro lugar e usar console.log () para monitorar as coisas.
tylerl
-1

No meu caso, o HTML foi organizado assim:

<div class="share">
  <div class="wrapper">
    <div class="share">
    </div>
  </div>
</div>

E meu jQuery era assim:

jQuery('.share').toggle();

Isso me confundiu porque nada parecia estar acontecendo. O problema era que os .shares internos toggle cancelariam os .shares externos toggle.

Steven Linn
fonte
-1

Resolvi esse problema alterando o tipo de elemento. em vez de botão eu coloco entrada, e esse problema não ocorre mais.

em vez de:

<button onclick="doSomthing()">click me</button>

substituir com:

<input onclick="doSomthing()" value="click me">
Shneor
fonte