jQuery click events firing multiple times

Question

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

User · Answer

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

User · Answer

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    lt div id  testDiv  gt     lt button class  testClass  gt Test Button lt  button gt   lt  div gt         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

User · Answer

Try that way    lt a href  javascript void 0   onclick  this onclick   false  fireThisFunctionOnlyOnce    gt  Fire function  lt  a gt

User · Answer

In case this works fine       ok    bind   click   function         console log  click

User · Answer

Unbind    works  but that might cause other issues in the future  The handler triggers multiple times when it is inside another handler  so keep your handler outside and if you want the values of the handler which had nested  assign them to a global variable that it will be accessible to the your handler

User · Answer

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

User · Answer

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

User · Answer

an Event will fire multiple time when it is registered multiple times  even if to the same handler    eg    ctrl   on  click   somefunction  if this piece of code is executed every time the page is partially refreshed  the event is being registered each time too  Hence even if the ctrl is clicked only once it may execute  somefunction  multiple times - how many times it execute will depend on how many times it was registered   this is true for any event registered in javascript   solution   ensure to call  on  only once   and for some reason if you cannot control the architecture then do this      ctrl   off  click        ctrl   on  click   somefunction

User · Answer

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

User · Answer

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

User · Answer

To make sure a click only actions once use this       bet   unbind   click function           Stuff

User · Answer

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

User · Answer

I had a problem because of markup   HTML    lt div class  myclass  gt    lt div class  inner  gt      lt div class  myclass  gt      lt a href     gt Click Me lt  a gt     lt  div gt     lt  div gt   lt  div gt    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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

The better option would be using off   lt script gt  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            lt  script gt

User · Answer

bed   one function         Docs   http   api jquery com one

User · Answer

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    lt button onclick  funName    gt Click here lt  button gt

User · Answer

The below code worked for me in my chat application to handle multiple mouse click triggering events more than once  if   e originalEvent detail    e originalEvent detail    1        Your code logic

User · Answer

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

User · Answer

element  click function  e      if e timeStamp     0     This will prevent event triggering more then once              do your stuff

User · Answer

I was having this problem with a dynamically generated link      document  on  click     mylink   function     do stuff         I found replacing document with  body  fixed the issue for me      body   on  click     mylink   function     do stuff

[javascript] jQuery click events firing multiple times

Examples related to javascript

Examples related to jquery

Examples related to click

Examples related to jquery-events