Eventi clic jQuery attivati ​​più volte

Sto tentando di scrivere un gioco di video poker in Javascript come un modo per metterlo a tacere, e ho riscontrato un problema in cui i gestori di eventi jQuery Click si attivano più volte.

Sono collegati ai pulsanti per piazzare una scommessa, e funziona benissimo per piazzare una scommessa sulla prima mano durante una partita (sparando una sola volta); ma scommettendo per la seconda mano, genera l'evento click due volte ogni volta che viene premuto un pulsante di scommessa o piazza scommessa (quindi due volte l'importo corretto viene puntato per ogni pressione). Complessivamente, segue questo schema per il numero di volte in cui l'evento click viene lanciato quando si preme una volta il pulsante di scommessa - dove l' ennesimo termine della sequenza è per la scommessa dell'ennesima mano dall'inizio del gioco: 1, 2, 4 , 7, 11, 16, 22, 29, 37, 46, che sembra essere n (n + 1) / 2 + 1 per quello che vale - e non ero abbastanza intelligente per capirlo, ho usato OEIS . :)

Ecco la funzione con i gestori di eventi click che agiscono; speriamo che sia facile da capire (fammi sapere se no, voglio migliorare anche in questo):

/** The following function keeps track of bet buttons that are pressed, until place button is pressed to place bet. **/
function pushingBetButtons() {
    $("#money").text("Money left: $" + player.money); // displays money player has left

    $(".bet").click(function() {
        var amount = 0; // holds the amount of money the player bet on this click
        if($(this).attr("id") == "bet1") { // the player just bet $1
            amount = 1;
        } else if($(this).attr("id") == "bet5") { // etc.
            amount = 5;
        } else if($(this).attr("id") == "bet25") {
            amount = 25;
        } else if($(this).attr("id") == "bet100") {
            amount = 100;
        } else if($(this).attr("id") == "bet500") {
            amount = 500;
        } else if($(this).attr("id") == "bet1000") {
            amount = 1000;
        }
        if(player.money >= amount) { // check whether the player has this much to bet
            player.bet += amount; // add what was just bet by clicking that button to the total bet on this hand
            player.money -= amount; // and, of course, subtract it from player's current pot
            $("#money").text("Money left: $" + player.money); // then redisplay what the player has left
        } else {
            alert("You don't have $" + amount + " to bet.");
        }
    });

    $("#place").click(function() {
        if(player.bet == 0) { // player didn't bet anything on this hand
            alert("Please place a bet first.");
        } else {
            $("#card_para").css("display", "block"); // now show the cards
            $(".card").bind("click", cardClicked); // and set up the event handler for the cards
            $("#bet_buttons_para").css("display", "none"); // hide the bet buttons and place bet button
            $("#redraw").css("display", "block"); // and reshow the button for redrawing the hand
            player.bet = 0; // reset the bet for betting on the next hand
            drawNewHand(); // draw the cards
        }
    });
}

Per favore fatemi sapere se avete idee o suggerimenti o se la soluzione al mio problema è simile a una soluzione a un altro problema qui (ho esaminato molti thread con lo stesso titolo e non ho avuto fortuna nel trovare una soluzione che potesse funzionare per me).

Per essere sicuro di fare clic solo sulle azioni una volta utilizzate questa:

$(".bet").unbind().click(function() {
    //Stuff
});

.unbind()è obsoleto e dovresti invece utilizzare il .off()metodo Basta chiamare .off()subito prima di chiamare .on().

Ciò 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
});

.uno()

Un'opzione migliore sarebbe .one():

Il gestore viene eseguito al massimo una volta per elemento per tipo di evento.

$(".bet").one('click',function() {
    //Your function
});

Nel caso di più classi e ogni classe deve essere cliccata una volta,

$(".bet").on('click',function() {
    //Your function
    $(this).off('click');   //or $(this).unbind()
});

Se scopri che .off () .unbind () o .stopPropagation () non risolve ancora il tuo problema specifico, prova a utilizzare .stopImmediatePropagation () Funziona alla grande in situazioni in cui vuoi che il tuo evento venga gestito senza bolle e senza effettuando qualsiasi altro evento già gestito. Qualcosa di simile a:

$(".bet").click(function(event) {
  event.stopImmediatePropagation();
  //Do Stuff
});

fa il trucco!

Se stai chiamando quella funzione su ogni "clic", allora sta aggiungendo un'altra coppia di gestori ad ogni chiamata.

Aggiungere gestori con jQuery non è come impostare il valore dell'attributo "onclick". Si possono aggiungere tutti i gestori che si desiderano.

un Evento si attiva più volte quando viene registrato più volte (anche se allo stesso gestore).

ad es. $("ctrl").on('click', somefunction)se questo pezzo di codice viene eseguito ogni volta che la pagina viene parzialmente aggiornata, anche l'evento viene registrato ogni volta. Pertanto, anche se si fa clic sul ctrl solo una volta, è possibile eseguire più volte una "funzione"; quante volte verrà eseguita dipenderà da quante volte è stata registrata.

questo vale per qualsiasi evento registrato in javascript.

soluzione:

assicurati di chiamare "on" solo una volta.

e per qualche motivo se non puoi controllare l'architettura, allora fai questo:

$("ctrl").off('click'); $("ctrl").on('click', somefunction);

Ho avuto un problema a causa del markup.

HTML:

<div class="myclass">
 <div class="inner">

  <div class="myclass">
   <a href="#">Click Me</a>
  </div>

 </div>
</div>

jQuery

$('.myclass').on('click', 'a', function(event) { ... } );

Noterai che ho la stessa classe "myclass" due volte in html, quindi chiama click per ogni istanza di div.

L'opzione migliore sarebbe utilizzando off

<script>
function flash() {
  $("div").show().fadeOut("slow");
}
$("#bind").click(function() {
  $( "body" )
    .on("click", "#theone", flash)
    .find("#theone")
      .text("Can Click!");
});
$("#unbind").click(function() {
  $("body")
    .off("click", "#theone", flash)
    .find("#theone")
      .text("Does nothing...");
});
</script>

Tutte le cose su .on () e .one () sono fantastiche, e jquery è fantastica.

Ma a volte, vuoi che sia un po 'più ovvio che l'utente non è autorizzato a fare clic, e in quei casi potresti fare qualcosa del genere:

function funName(){
    $("#orderButton").prop("disabled", true);
    //  do a bunch of stuff
    // and now that you're all done
    setTimeout(function(){
        $("#orderButton").prop("disabled",false);
        $("#orderButton").blur();
    }, 3000);
}

e il tuo pulsante sarebbe simile a:

<button onclick='funName()'>Click here</button>

Succede a causa di un evento particolare legato più volte allo stesso elemento.

La soluzione che ha funzionato per me è:

Uccidi tutti gli eventi collegati usando il .die()metodo.

E quindi allega il tuo listener di metodi.

Così,

$('.arrow').click(function() {
// FUNCTION BODY HERE
}

dovrebbe essere:

$('.arrow').die("click")
$('.arrow').click(function() {
// FUNCTION BODY HERE
}

Dobbiamo stopPropagation()evitare Al fine di evitare l'evento di innescare Clic troppe volte.

$(this).find('#cameraImageView').on('click', function(evt) {
   evt.stopPropagation();
   console.log("Camera click event.");
});

Impedisce all'evento di gorgogliare l'albero del DOM, impedendo a qualsiasi gestore padre di essere informato dell'evento. Questo metodo non accetta alcun argomento.

Possiamo usare event.isPropagationStopped() per determinare se questo metodo è mai stato chiamato (su quell'oggetto evento).

Questo metodo funziona anche per eventi personalizzati attivati ​​con trigger (). Notare che ciò non impedirà l'esecuzione di altri gestori sullo stesso elemento.

Nel mio caso stavo usando "delegato", quindi nessuna di queste soluzioni ha funzionato. Credo che sia stato il pulsante a comparire più volte tramite chiamate Ajax che ha causato il problema dei clic multipli. Le soluzioni utilizzavano un timeout, quindi viene riconosciuto solo l'ultimo clic:

var t;
$('body').delegate( '.mybutton', 'click', function(){
    // clear the timeout
    clearTimeout(t);
    // Delay the actionable script by 500ms
    t = setTimeout( function(){
        // do something here
    },500)
})

$('.bed').one(function(){ })

Documenti:

http://api.jquery.com/one/

$(element).click(function (e)
{
  if(e.timeStamp !== 0) // This will prevent event triggering more then once
   {
      //do your stuff
   }
}

.one viene generato solo una volta per la durata della pagina

Quindi, nel caso in cui si desideri eseguire la convalida, questa non è la soluzione giusta, perché quando non si esce dalla pagina dopo la convalida, non si torna più indietro. Meglio usare

$(".bet").on('click',function() 
{ //validation 
   if (validated) { 
      $(".bet").off('click'); //prevent to fire again when we are not yet off the page
      //go somewhere
    }
});

Quando mi occupo di questo problema, utilizzo sempre:

$(".bet").unbind("click").bind("click", function (e) {
  // code goes here
}

In questo modo mi sciolgo e mi ritrovo nello stesso colpo.

https://jsfiddle.net/0vgchj9n/1/

Per assicurarti che l'evento si attivi sempre solo una volta, puoi usare Jquery .one (). JQuery one assicura che il gestore eventi abbia chiamato solo una volta. Inoltre, puoi iscriverti al gestore dell'evento con uno per consentire ulteriori clic al termine dell'elaborazione dell'operazione di clic corrente.

<div id="testDiv">
  <button class="testClass">Test Button</button>
</div>

...

var subscribeClickEvent = function() {$("#testDiv").one("click", ".testClass", clickHandler);};

function clickHandler() {
  //... perform the tasks  
  alert("you clicked the button");
  //... subscribe the click handler again when the processing of current click operation is complete  
  subscribeClickEvent();
}

subscribeClickEvent();

Prova in questo modo:

<a href="javascript:void(0)" onclick="this.onclick = false; fireThisFunctionOnlyOnce()"> Fire function </a>

Nel mio caso, l'evento onclick è stato attivato più volte perché avevo creato un gestore di eventi generico relativamente

  `$('div').on("click", 'a[data-toggle="tab"]',function () {
        console.log("dynamic bootstrap tab clicked");
        var href = $(this).attr('href');
        window.location.hash = href;
   });`

cambiato in

    `$('div#mainData').on("click", 'a[data-toggle="tab"]',function () {
        console.log("dynamic bootstrap tab clicked");
        var href = $(this).attr('href');
        window.location.hash = href;
    });`

e devono anche creare gestori separati per i clic statici e dinamici, per i clic sulle schede statiche

    `$('a[data-toggle="tab"]').on("click",function () {
        console.log("static bootstrap tab clicked");
        var href = $(this).attr('href');
        window.location.hash = href;
    });`

Nel mio caso avevo caricato *.jsdue volte lo stesso file sulla pagina in un <script>tag, quindi entrambi i file collegavano i gestori di eventi all'elemento. Ho rimosso la dichiarazione duplicata e questo ha risolto il problema.

Un'altra soluzione che ho trovato è stata questa, se hai più classi e hai a che fare con i pulsanti di opzione mentre fai clic sull'etichetta.

$('.btn').on('click', function(e) {
    e.preventDefault();

    // Hack - Stop Double click on Radio Buttons
    if (e.target.tagName != 'INPUT') {
        // Not a input, check to see if we have a radio
        $(this).find('input').attr('checked', 'checked').change();
    }
});

Stavo avendo questo problema con un link generato dinamicamente:

$(document).on('click', '#mylink', function({...do stuff...});

Ho trovato la sostituzione documentcon 'body'risolto il problema per me:

$('body').on('click', '#mylink', function({...do stuff...});

Unbind () funziona, ma ciò potrebbe causare altri problemi in futuro. Il gestore si innesca più volte quando si trova all'interno di un altro gestore, quindi mantieni il gestore all'esterno e se desideri i valori del gestore che aveva nidificato, assegnali a una variabile globale che sarà accessibile al gestore.

Nel caso in cui funzioni bene

$( "#ok" ).bind( "click", function() {
    console.log("click"); 
});

Il codice seguente ha funzionato per me nella mia applicazione di chat per gestire più clic innescando eventi più di una volta. if (!e.originalEvent.detail || e.originalEvent.detail == 1) { // Your code logic }