L'evento click () sta chiamando due volte in jquery

Ho impostato un elemento link e ho chiamato il suo evento click in jquery ma l'evento click sta chiamando due volte, vedi sotto il codice di jquery.

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

Si prega di avvisare.

Grazie.

Assicurati di non aver incluso accidentalmente due volte lo script nella tua pagina HTML.

Effettua lo sblocco prima del clic;

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

Significa che il tuo codice ha incluso lo script jquery due volte. Ma prova questo:

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

//your code

});

Ho provato e.stopImmediatePropagation(),; Questo sembra funzionare per me.

Nel mio caso ho utilizzato lo script seguente per risolvere il problema

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

off()scioglie tutti gli eventi legati a #id. Se vuoi svincolare solo l' clickevento, usa off('click').

Chiama semplicemente .off () subito prima di chiamare .on ().

Questo rimuoverà tutti i gestori di eventi:

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

Per rimuovere solo i gestori di eventi "clic" registrati:

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

Una soluzione piuttosto comune al problema dei due clic è mettere

e.stopPropagation()

alla fine della tua funzione (supponendo che tu lo usi function(e)). In questo modo si evita che l'evento ribolle che potrebbe portare a una seconda esecuzione della funzione.

Ho avuto lo stesso problema, ma puoi provare a cambiare questo codice

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

a questa:

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

Per me, questo codice ha risolto il problema. Ma fai attenzione a non includere accidentalmente il tuo script due volte nella tua pagina HTML. Penso che se stai facendo queste due cose correttamente, il tuo codice funzionerà correttamente. Grazie

per favore prova questo

$('#ddlSupervisor').live('change', function (e) {
    if (e.handled !== true) { //this makes event to fire only once
    getEmployeesbySupervisor();
    e.handled = true;
   }
});

Questo è sicuramente un bug specialmente mentre è FireFox. Ho cercato un sacco di provare tutte le risposte di cui sopra e alla fine l'ho ottenuto come bug da molti esperti su SO. Quindi, finalmente ho avuto questa idea dichiarando la variabile come

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);

    }
});

In questo modo verifica prima piuttosto che la funzione è stata chiamata in precedenza o meno.

L'aggiunta e.preventDefault();all'inizio della mia funzione ha funzionato per me.

Questa è una domanda più vecchia, ma se stai usando la delega degli eventi questo è ciò che ha causato per me.

Dopo .delegate-twoaverlo rimosso ha interrotto l'esecuzione due volte. Credo che ciò accada se entrambi i delegati sono presenti sulla stessa pagina.

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

questo frammento di codice non contiene niente di male. È un'altra parte della tua sceneggiatura, come ha detto @karim

Nel mio caso, funzionava bene in Chrome e IE chiamava .click()due volte. se questo era il tuo problema, l'ho risolto restituendo false, dopo aver chiamato l' .click()evento

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

La chiamata ha unbindrisolto il mio problema:

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

Non sono sicuro del perché, ma ho avuto questo problema con

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

Quando l'ho cambiato in

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

Il problema è stato risolto. Ma sicuramente qualcosa non va nel mio codice.

Sono stato ingannato da una selezione che corrisponde a più elementi, quindi ognuno è stato cliccato. :firstaiutato:

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

Anch'io ho avuto questo problema su FF. Il mio tag era tuttavia associato a un <a>tag. Sebbene il <a>tag non andasse da nessuna parte, faceva comunque il doppio clic. Ho sostituito il <a>tag con un <span>tag e il problema del doppio clic è scomparso.

Un'altra alternativa è rimuovere completamente l'attributo href se il collegamento non va da nessuna parte.

Ho riscontrato questo problema perché il mio $(elem).click(function(){});script è stato inserito in linea in un div impostato su style="display:none;".

Quando la visualizzazione CSS è stata impostata su blocco, lo script aggiungeva il listener di eventi una seconda volta. Ho spostato lo script in un file .js separato e il listener di eventi duplicato non è stato più avviato.

Quando utilizzo questo metodo per caricare la pagina con jquery, scrivo $('#obj').off('click');prima di impostare la funzione di clic, quindi la bolla non si verifica. Per me va bene.

La mia semplice risposta è stata trasformare il collegamento a clic in una funzione e chiamarlo dal clic dell'elemento: ha funzionato a meraviglia! mentre nessuno dei precedenti lo ha fatto

Se il tuo evento chiama due o tre volte o più, questo potrebbe essere d'aiuto.

Se stai usando qualcosa di simile per attivare eventi ...

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

... quindi .js-someclassfai attenzione al numero di elementi che hai sulla pagina, perché attiverà l'evento clic per tutti gli elementi - e non solo una volta!

Una semplice soluzione è quindi assicurarsi di attivare il clic una sola volta, selezionando solo il primo elemento , ad esempio:

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

Sicuramente da qualche altra parte nei tuoi script l'evento "click" viene nuovamente associato allo stesso elemento, come suggeriscono molte altre risposte / commenti.

Ho avuto un problema simile e per verificarlo, ho semplicemente aggiunto un console.logcomando al mio script, come nel seguente frammento:

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

Se, facendo clic sul pulsante, ottieni qualcosa di simile all'immagine sottostante dalla console per sviluppatori del tuo browser (come ho fatto io), allora sai per certo che l' click()evento è stato associato due volte allo stesso pulsante.

Se hai bisogno di una patch veloce, la soluzione proposta da altri commentatori di utilizzare il offmetodo (btw unbindè deprecato da jQuery 3.0) per svincolare l'evento prima di (ri) associare funziona bene, e lo consiglio anche io:

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

Sfortunatamente, questa è solo una patch temporanea! Una volta risolto il problema di rendere felice il tuo capo, dovresti davvero scavare un po 'di più nel tuo codice e risolvere il problema del "binding duplicato".

La soluzione effettiva dipende ovviamente dal tuo caso d'uso specifico. Nel mio caso, ad esempio, c'era un problema di "contesto". La mia funzione veniva invocata come risultato di una chiamata Ajax applicata a una parte specifica del documento: ricaricare l'intero documento in realtà stava ricaricando entrambi i contesti "pagina" e "elemento", risultando associato all'elemento due volte .

La mia soluzione a questo problema è stata quella di sfruttare la funzione jQuery one , che è la stessa di on con l'eccezione che l'evento viene automaticamente scollegato dopo la sua prima chiamata. Era l'ideale per il mio caso d'uso ma, ancora una volta, potrebbe non essere la soluzione per altri casi d'uso.

Ho avuto lo stesso problema. Questo ha funzionato per me -

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

Spero che questo aiuti qualcuno.

Nel mio caso, l'HTML era strutturato in questo modo:

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

E il mio jQuery era così:

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

Mi ha confuso perché sembrava che non stesse accadendo nulla. Il problema è che gli interni .shares toggle avrebbero annullare gli esterni .shares toggle.

Ho risolto questo problema cambiando il tipo di elemento. invece del pulsante inserisco l'input e questo problema non si verifica più.

invece di:

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

sostituirlo con:

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