Zdarzenia kliknięcia jQuery uruchamiane wielokrotnie

Próbuję napisać grę w pokera wideo w Javascripcie jako sposób na zapoznanie się z jej podstawami i napotkałem problem polegający na tym, że programy obsługi zdarzeń kliknięcia jQuery uruchamiają się wielokrotnie.

Są one przymocowane do przycisków służących do obstawiania i działa dobrze przy obstawianiu pierwszego rozdania podczas gry (strzelanie tylko raz); ale w zakładach na drugie rozdanie uruchamia zdarzenie kliknięcia dwa razy za każdym razem, gdy zostanie naciśnięty przycisk zakładu lub postawienia zakładu (więc dwukrotność prawidłowej kwoty za każde naciśnięcie). Ogólnie rzecz biorąc, następuje to według tego, ile razy zdarzenie kliknięcia jest uruchamiane po jednokrotnym naciśnięciu przycisku zakładu - gdzie i-ty termin sekwencji dotyczy zakładów i-tego rozdania od początku gry: 1, 2, 4 , 7, 11, 16, 22, 29, 37, 46, który wydaje się być n (n + 1) / 2 + 1 dla tego, co jest warte - i nie byłem wystarczająco inteligentny, aby to zrozumieć, użyłem OEIS . :)

Oto funkcja z działającymi funkcjami obsługi zdarzeń kliknięcia; miejmy nadzieję, że łatwo to zrozumieć (daj mi znać, jeśli nie, chcę też być lepszy):

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

Daj mi znać, jeśli masz jakieś pomysły lub sugestie lub jeśli rozwiązanie mojego problemu jest podobne do rozwiązania innego problemu tutaj (przejrzałem wiele podobnie utytułowanych wątków i nie miałem szczęścia znaleźć rozwiązania, które mogłoby zadziałać dla mnie).

Aby mieć pewność, że działania wykonywane tylko za jednym kliknięciem, użyj tego:

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

.unbind()jest przestarzałe i .off()zamiast tego należy użyć tej metody. Po prostu zadzwoń, .off()zanim zadzwonisz .on().

Spowoduje to usunięcie wszystkich procedur obsługi zdarzeń:

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

Aby usunąć tylko zarejestrowane programy obsługi zdarzeń „kliknięcia”:

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

.jeden()

Lepszą opcją byłoby .one():

Procedura obsługi jest wykonywana najwyżej raz dla elementu na typ zdarzenia.

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

W przypadku wielu klas i każdej klasy należy kliknąć raz,

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

Jeśli stwierdzisz, że .off () .unbind () lub .stopPropagation () nadal nie rozwiązuje konkretnego problemu, spróbuj użyć .stopImmediatePropagation () działa świetnie w sytuacjach, gdy chcesz, aby Twoje zdarzenie było obsługiwane bez propagacji i bez wpływające na inne obsługiwane już zdarzenia. Coś jak:

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

Zrób sztuczkę!

Jeśli wywołujesz tę funkcję przy każdym „kliknięciu”, to dodaje kolejną parę procedur obsługi dla każdego połączenia.

Dodanie modułów obsługi za pomocą jQuery po prostu nie przypomina ustawiania wartości atrybutu „onclick”. Można dodać dowolną liczbę programów obsługi.

wydarzenie zostanie uruchomione wiele razy, jeśli zostanie zarejestrowane wielokrotnie (nawet jeśli dotyczy tego samego modułu obsługi).

np. $("ctrl").on('click', somefunction)jeśli ten fragment kodu jest wykonywany za każdym razem, gdy strona jest częściowo odświeżana, zdarzenie jest również rejestrowane za każdym razem. Dlatego nawet jeśli klikniesz ctrl tylko raz, może on wykonać wielokrotnie „jakąś funkcję” - ile razy wykona, będzie zależeć od tego, ile razy został zarejestrowany.

dotyczy to każdego zdarzenia zarejestrowanego w javascript.

rozwiązanie:

pamiętaj, aby zadzwonić tylko raz.

i z jakiegoś powodu, jeśli nie możesz kontrolować architektury, zrób to:

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

Miałem problem z powodu znaczników.

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

Zauważysz, że mam dwukrotnie tę samą klasę „myclass” w html, więc wywołuje kliknięcie dla każdej instancji div.

Lepszą opcją byłoby wyłączenie

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

Wszystkie rzeczy związane z .on () i .one () są świetne, a jquery jest świetne.

Ale czasami chcesz, aby było trochę bardziej oczywiste, że użytkownik nie może kliknąć, aw takich przypadkach możesz zrobić coś takiego:

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

a twój przycisk wyglądałby tak:

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

Dzieje się tak, ponieważ dane zdarzenie jest wielokrotnie powiązane z tym samym elementem.

Rozwiązaniem, które działało dla mnie jest:

Zabij wszystkie zdarzenia dołączone za pomocą .die()metody.

A następnie dołącz swój detektor metod.

A zatem,

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

Powinien być:

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

Musimy stopPropagation(), aby zbyt wiele razy unikać zdarzenia uruchamiającego kliknięcia.

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

Zapobiega to propagacji zdarzenia w drzewie DOM, zapobiegając powiadamianiu o zdarzeniu przez wszystkie programy nadrzędne. Ta metoda nie przyjmuje żadnych argumentów.

Możemy użyć event.isPropagationStopped()do ustalenia, czy ta metoda została kiedykolwiek wywołana (dla tego obiektu zdarzenia).

Ta metoda działa również w przypadku niestandardowych zdarzeń wyzwalanych za pomocą trigger (). Należy pamiętać, że nie zapobiegnie to uruchomieniu innych procedur obsługi tego samego elementu.

W moim przypadku korzystałem z funkcji „deleguj”, więc żadne z tych rozwiązań nie działało. Wydaje mi się, że to przycisk pojawiający się wiele razy za pośrednictwem wywołań ajax powodował problem z wieloma kliknięciami. Rozwiązania wykorzystywały limit czasu, więc rozpoznawane jest tylko ostatnie kliknięcie:

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(){ })

Dokumenty:

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 strzela tylko raz przez cały czas istnienia strony

Jeśli więc chcesz przeprowadzić walidację, nie jest to właściwe rozwiązanie, ponieważ jeśli nie opuścisz strony po walidacji, nigdy nie wrócisz. Lepszy w użyciu

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

Kiedy rozwiązuję ten problem, zawsze używam:

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

W ten sposób rozpinam i ponownie wiążę jednym pociągnięciem.

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

Aby mieć pewność, że zdarzenie zawsze uruchamia się tylko raz, możesz użyć Jquery .one (). JQuery one zapewnia, że ​​moduł obsługi zdarzeń wywoływany jest tylko raz. Ponadto możesz zasubskrybować moduł obsługi zdarzeń za pomocą jednego, aby umożliwić dalsze kliknięcia po zakończeniu przetwarzania bieżącej operacji kliknięcia.

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

Spróbuj w ten sposób:

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

W moim przypadku zdarzenie onclick było uruchamiane wiele razy, ponieważ stworzyłem ogólną procedurę obsługi zdarzeń podobnie jak

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

zmienić na

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

a także muszą tworzyć osobne procedury obsługi dla kliknięć statycznych i dynamicznych, dla statycznych kliknięć kart

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

W moim przypadku *.jsdwukrotnie załadowałem ten sam plik na stronę w <script>tagu, więc oba pliki dołączały procedury obsługi zdarzeń do elementu. Usunąłem duplikat deklaracji i to rozwiązało problem.

Innym rozwiązaniem, które znalazłem, było to, że jeśli masz wiele klas i masz do czynienia z przyciskami opcji podczas klikania etykiety.

$('.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();
    }
});

Miałem ten problem z linkiem generowanym dynamicznie:

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

Znalazłem wymianie documentz 'body'Naprawiono problem dla mnie:

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

Unbind () działa, ale może to powodować inne problemy w przyszłości. Program obsługi uruchamia się wiele razy, gdy znajduje się w innym module obsługi, więc trzymaj swój moduł obsługi na zewnątrz, a jeśli chcesz wartości modułu obsługi, który się zagnieździł, przypisz je do zmiennej globalnej, która będzie dostępna dla twojego modułu obsługi.

Jeśli to działa dobrze

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

Poniższy kod działał dla mnie w mojej aplikacji czatu do obsługi wielu zdarzeń wyzwalających kliknięcie myszą więcej niż raz. if (!e.originalEvent.detail || e.originalEvent.detail == 1) { // Your code logic }