javascript - evento - onclick jquery html

jQuery clic eventos disparando varias veces

Question

Estoy intentando escribir un juego de video póker en Javascript como una forma de aprender lo básico, y me he encontrado con un problema en el que los controladores de eventos de clic de jQuery disparan varias veces.

Se adjuntan a los botones para colocar una apuesta, y funciona bien para colocar una apuesta en la primera mano durante un juego (disparar solo una vez); pero al apostar por la segunda mano, dispara el evento de clic dos veces cada vez que se presiona un botón de apuesta o apuesta de apuesta (por lo que se apuesta dos veces la cantidad correcta para cada presión). En general, sigue este patrón el número de veces que se dispara el evento de clic al presionar un botón de apuesta una vez, donde el término de la secuencia es para la apuesta de la mano desde el principio del juego: 1, 2, 4 , 7, 11, 16, 22, 29, 37, 46, que parece ser n (n + 1) / 2 + 1 para lo que sea que valga, y no era lo suficientemente inteligente como para darme cuenta de eso, usé OEIS . :)

Aquí está la función con los controladores de eventos de clic que están actuando; ojalá sea fácil de entender (déjame saber si no, también quiero mejorar en eso):

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

Déjeme saber si tiene alguna idea o sugerencia, o si la solución a mi problema es similar a una solución a otro problema aquí (he visto muchos hilos con el mismo nombre y no tuve suerte en encontrar una solución que pudiera funcionar) para mi).

Answer 1

.one()

Una mejor opción sería .one() :

El controlador se ejecuta como máximo una vez por elemento por tipo de evento.

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

En el caso de varias clases y cada clase necesita hacer clic una vez,

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

Answer 2

.one solo se dispara una vez durante la vida útil de la página.

Entonces, en caso de que quiera hacer la validación, esta no es la solución correcta, porque cuando no abandona la página después de la validación, nunca regresará. Mejor usar

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

Answer 3

Cuando trato con este problema, siempre uso:

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

De esta manera me desenrollo y vuelvo a unir en el mismo golpe.

Answer 4

Debemos stopPropagation() Para evitar que los clics activen el evento demasiadas veces.

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

Evita que el evento haga burbujas en el árbol DOM, evitando que se notifique a los controladores principales del evento. Este método no acepta ningún argumento.

Podemos usar event.isPropagationStopped() para determinar si este método fue llamado alguna vez (en ese objeto de evento).

Este método también funciona para eventos personalizados activados con trigger (). Tenga en cuenta que esto no evitará que se ejecuten otros controladores en el mismo elemento.

Answer 5

En mi caso, el evento onclick se disparó varias veces porque había hecho un controlador de eventos genérico comparativamente como

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

cambiado a

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

y también tienen que hacer manejadores separados para clics estáticos y dinámicos, para clics estáticos de pestañas

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

Answer 6

En mi caso, estaba usando ''delegar'', por lo que ninguna de estas soluciones funcionó. Creo que fue el botón que apareció varias veces a través de llamadas ajax lo que causó el problema del clic múltiple. Las soluciones estaban usando un tiempo de espera, por lo que solo se reconoce el último 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)
})

Answer 7

En mi caso, había cargado el mismo archivo *.js en la página dos veces en una etiqueta <script> , por lo que ambos archivos adjuntaban controladores de eventos al elemento. Quité la declaración duplicada y eso solucionó el problema.

Answer 8

Es un problema viejo, pero lo enfrenté hoy, y creo que mi respuesta ayudará al futuro buscador de desafíos similares.

se ejecuta varias veces, porque la función "on (''click'', somefunction)" se llama varias veces y, por lo tanto, se enlaza varias veces. Para resolver esto permanentemente, debe asegurarse de que la función "on" esté en tal Lugar que solo será ejecutado una vez. después de lo cual, en el evento de clic del mouse, la función se activará solo una vez.

por ejemplo, si pongo "on (''click'', somefunction)" en un lugar donde se cargará dos veces, en cada click - "somefunction" se disparará dos veces.

en una secuencia lógica correcta, la función "off" debe usarse solo cuando realmente tiene la intención de desenlazar los eventos. usarlo para ocultar los errores lógicos causados ​​debido a la doble carga de la función "on", no es un buen enfoque, incluso si parece estar funcionando.

Answer 9

Intenta de esa manera:

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

Answer 10

La mejor opción sería .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>

Answer 11

Ocurre debido a que el evento en particular está vinculado varias veces al mismo elemento.

La solución que funcionó para mí es:

Mata todos los eventos adjuntos usando el método .die() .

Y luego adjuntar su oyente método.

Así,

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

debiera ser:

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

Answer 12

Para asegurarte de hacer clic solo en acciones una vez usa esto:

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

Answer 13

Si encuentra que .off () .unbind () o .stopPropagation () aún no soluciona su problema específico, intente usar .stopImmediatePropagation() Funciona muy bien en situaciones en las que solo desea que su evento se maneje sin burbujas y sin Efectuando cualquier otro evento que ya esté siendo manejado. Algo como:

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

¡Hace el truco!

Answer 14

Si está llamando a esa función en cada "clic", entonces está agregando otro par de controladores en cada llamada.

Agregar manejadores con jQuery no es como configurar el valor del atributo "onclick". Uno puede agregar tantos manejadores como desee.

Answer 15

Todo lo relacionado con .on () y .one () es genial, y jquery es genial.

Pero a veces, desea que sea un poco más obvio que el usuario no puede hacer clic y, en esos casos, podría hacer algo como esto:

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

y tu botón se vería como:

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

Answer 16

Tuve un problema debido a las marcas.

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

Observa que tengo la misma clase ''myclass'' dos veces en html, por lo que llama click para cada instancia de div.

Answer 17

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

Para asegurarse de que el evento siempre se active solo una vez, puede usar Jquery .one (). JQuery one garantiza que su manejador de eventos solo llame una vez. Además, puede suscribir su controlador de eventos con uno para permitir más clics cuando haya terminado el procesamiento de la operación de clic actual.

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

Answer 18

.unbind() está en desuso y debería usar el método .off() lugar. Simplemente llame a .off() justo antes de llamar a .on() .

Esto eliminará todos los controladores de eventos:

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

Para eliminar solo los controladores de eventos ''clic'' registrados:

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

Answer 19

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