javascript - fire - trigger in jquery




jQuery click eventi che si attivano più volte (10)

.one()

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

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

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

Sto tentando di scrivere un gioco di video poker in Javascript come un modo per ottenere le basi su di esso, e ho incontrato un problema in cui i gestori di eventi click jQuery sparano più volte.

Sono attaccati ai pulsanti per piazzare una scommessa, e funzionano bene per piazzare una scommessa sulla prima mano durante una partita (sparando una sola volta); ma nelle scommesse per la seconda mano, spara l'evento click due volte ogni volta che si preme una scommessa o un pulsante di puntata (quindi il doppio dell'ammontare corretto è scommesso per ogni stampa). Complessivamente, segue questo schema per il numero di volte in cui l'evento click viene attivato quando si preme un pulsante di scommessa una volta - dove il termine in ith della sequenza è per le scommesse della mano in mano dall'inizio della partita: 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 stanno agendo; speriamo 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 qualche idea o suggerimento, o se la soluzione al mio problema è simile a una soluzione ad un altro problema qui (ho guardato molti thread dal titolo simile e non ho avuto fortuna nel trovare una soluzione che potesse funzionare per me).


è un vecchio problema, ma l'ho affrontato oggi, e penso che la mia risposta aiuterà il futuro a cercare simili sfide.

è eseguito più volte, perché la funzione "on (" click ", somefunction)" viene chiamata più volte e quindi viene associata più volte - per risolvere definitivamente questo, è necessario assicurarsi che la funzione "on" sia in tale posto che verrà eseguito solo una volta. dopodiché sull'evento click del mouse, la funzione verrà attivata una sola volta.

per esempio se metto "on ('click', somefunction)" in un posto dove verrà caricato due volte, poi ad ogni clic - "somefunction" sarà sparato due volte.

in una sequenza logica corretta, la funzione "off" dovrebbe essere utilizzata solo quando si intende realmente separare gli eventi. usarlo per nascondere gli errori logici causati dal doppio caricamento della funzione "on", non è un buon approccio anche se sembra funzionare.


Dobbiamo stopPropagation() per evitare che Clic scatti l'evento troppe volte.

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

Impedisce all'evento di ribollire nell'albero DOM, impedendo a tutti i gestori genitore di essere avvisati dell'evento. Questo metodo non accetta argomenti.

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

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


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) { ... } );

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


Nel mio caso stavo usando "delegato", quindi nessuna di queste soluzioni funzionava. Credo che sia stato il pulsante visualizzato più volte tramite le chiamate ajax che causava il problema di più clic. 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)
})

Per assicurarti che un clic azioni solo una volta, usa questo:

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

Se trovi che .off () .unbind () o .stopPropagation () continua a non risolvere il tuo problema specifico, prova a utilizzare .stopImmediatePropagation() Funziona alla grande in situazioni in cui desideri semplicemente gestire il tuo evento senza alcun bubbling e senza effettuando qualsiasi altro evento già gestito. Qualcosa di simile a:

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

fa il trucco!


Succede perché l'evento particolare è associato più volte allo stesso elemento.

La soluzione che ha funzionato per me è:

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

E quindi collega il tuo ascoltatore del metodo.

Così,

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

dovrebbe essere:

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

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

Per assicurarti che l'evento si attivi sempre solo una volta, puoi utilizzare Jquery .one (). JQuery one garantisce che il gestore eventi venga chiamato solo una volta. Inoltre, puoi sottoscrivere il gestore di eventi con uno per consentire ulteriori clic quando hai terminato l'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();

.unbind() è deprecato e dovresti usare il metodo .off() . Basta chiamare .off() proprio prima di chiamare .on() .

Questo rimuoverà tutti i gestori di eventi:

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

Per rimuovere solo gestori di eventi "clic" registrati:

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






click