jQuery click events firing multiple times

jQuery click events firing multiple times

I’m attempting to write a video poker game in Javascript as a way of getting the basics of it down, and I’ve run into a problem where the jQuery click event handlers are firing multiple times.
They’re attached to buttons for placing a bet, and it works fine for placing a bet on the first hand during a game (firing only once); but in betting for the second hand, it fires the click event twice each time a bet or place bet button is pressed (so twice the correct amount is bet for each press). Overall, it follows this pattern for number of times the click event is fired when pressing a bet button once–where the ith term of the sequence is for the betting of the ith hand from the beginning of the game: 1, 2, 4, 7, 11, 16, 22, 29, 37, 46, which appears to be n(n+1)/2 + 1 for whatever that’s worth–and I wasn’t smart enough to figure that out, I used OEIS. 🙂
Here’s the function with the click event handlers that are acting up; hopefully it’s easy to understand (let me know if not, I want to get better at that as well):
/** 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

Related:  Difference between npx and npm?

$(“.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

Related:  What is the minimum valid JSON?

Please let me know if you have any ideas or suggestions, or if the solution to my problem is similar to a solution to another problem on here (I’ve looked at many similarly titled threads and had no luck in finding a solution that could work for me).


Solution 1:

To make sure a click only actions once use this:

$(".bet").unbind().click(function() {

Solution 2:

.unbind() is deprecated and you should use the .off() method instead. Simply call .off() right before you call .on().

This will remove all event handlers:

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

To only remove registered ‘click’ event handlers:

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

Solution 3:


A better option would be .one() :

The handler is executed at most once per element per event type.

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

In case of multiple classes and each class needs to be clicked once,

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

Solution 4:

If you find that .off() .unbind() or .stopPropagation() still doesn’t fix your specific issue, try using .stopImmediatePropagation() Works great in situations when you just want your event to be handled without any bubbling and without effecting any other events already being handled. Something like:

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

does the trick!

Related:  What does prototype mean here in the jQuery source code?

Solution 5:

If you’re calling that function on each “click”, then it’s adding another pair of handlers on each call.

Adding handlers with jQuery just isn’t like setting the value of the “onclick” attribute. One can add as many handlers as one desires.

Solution 6:

its an old issue, but i faced it today, and i think my answer will help for future seeker of similar challenges.

it is executed multiple times, because the “on(‘click’, somefunction)” function is being called multiple times and hence it gets binded multiple times – to permanently solve this, you need to ensure that “on” function is in such a place that it will only be executed once. after which on the mouse click event, the function will be fired only once.

for example if i put “on(‘click’, somefunction)” in a place where it will be loaded twice, then on every click – “somefunction” will be fired twice.

in a correct logical sequence “off” function should be used only when you really intend to unbind the events. to use it for hiding the logical errors caused due to double loading of “on” function, is not a good approach even if it may seem to be working.