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

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

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

回答1:

To make sure a click only actions once use this:

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

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

回答3:

.one()

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

回答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) {
  event.stopImmediatePropagation();
  //Do Stuff
});

does the trick!

回答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.

回答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.

回答7:

I had a problem because of 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) { ... } );

You notice I have the same class \'myclass\' twice in html, so it calls click for each instance of div.

回答8:

All the stuff about .on() and .one() is great, and jquery is great.

But sometimes, you want it to be a little more obvious that the user isn\'t allowed to click, and in those cases you could do something like this:

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

and your button would look like:

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

回答9:

It happens due to the particular event is bound multiple times to the same element.

The solution which worked for me is:

Kill all the events attached using .die() method.

And then attach your method listener.

Thus,

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

should be:

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

回答10:

We must to stopPropagation() In order to avoid Clicks triggers event too many times.

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

It Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event. This method does not accept any arguments.

We can use event.isPropagationStopped() to determine if this method was ever called (on that event object).

This method works for custom events triggered with trigger(), as well.Note that this will not prevent other handlers on the same element from running.

回答11:

The better option would be using 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>

回答12:

In my case I was using \'delegate\', so none of these solutions worked. I believe it was the button appearing multiple times via ajax calls that was causing the multiple click issue. The solutions was using a timeout so only the last click is recognized:

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

回答13:

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

回答14:

When I deal with this issue, I always use:

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

This way I unbind and rebind in the same stroke.

回答15:

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

To make sure the event always only fires once, you can use Jquery .one() . JQuery one ensures that your event handler only called once. Additionally, you can subscribe your event handler with one to allow further clicks when you have finished the processing of the current click operation.

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

回答16:

.one only fires once for the lifetime of the page

So in case you want to do validation, this is not the right solution, because when you do not leave the page after validation, you never come back. Better to use

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

回答17:

Try that way:

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

回答18:

In my case, onclick event was firing multiple times coz I had made a generic event handler comparatively as

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

changed to

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

and also have to make separate handlers for static and dynamic clicks, for static tab click

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

回答19:

In my case I had loaded the same *.js file on the page twice in a <script> tag, so both files were attaching event handlers to the element. I removed the duplicate declaration and that fixed the problem.

回答20:

Another solution I found was this, if you have multiple classes and are dealing with radio buttons while clicking on the label.

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