jQuery Button click event is triggered twice

Question

I have the following problem with this code    lt button id  delete  gt Remove items lt  button gt       delete   button        icons                 primary   ui-icon-trash            click function          alert  Clicked          If I click this button  the alert show up two times  It s not only with this specific button but with every single button I create   What am I doing wrong

User · Answer

Just like what Nick is trying to say  something from outside is triggering the event twice  To solve that you should use event stopPropagation   to prevent the parent element from bubbling      button   click function event        event stopPropagation          I hope this helps

User · Answer

I had the same problem and tried everything but it didn t worked  So I used following trick   function do stuff e        if e   alert e           delete   click function         do stuff  Clicked             You check if that parameter isn t null than you do code  So when the function will triggered second time it will show what you want

User · Answer

in my case  i was using the change command like this way    document  on  change     select-brand   function        my codes        and then i changed the way to       select-brand   on  change   function        my codes        and it solved my problem

User · Answer

This can as well be triggered by having both input and label inside the element with click listener   You click on the label  which triggers a click event and as well another click event on the input for the label  Both events bubble to your element   See this pen of a fancy CSS-only toggle  https   codepen io stepanh pen WaYzzO  Note  This is not jQuery specific  native listener is triggered 2x as well as shown in the pen

User · Answer

you can try this           id   off   on  click   function                function body                 class   off   on  click   function                function body

User · Answer

Related to Stepan s Answer   in my case  i have both input and label in my  click   listener   i just replaced the label to div  it worked

User · Answer

This can be caused for following reasons   You have included the script more than once in the same html file You have added the event listener twice  eg  using onclick attribute on the element and also with jquery The event is bubbled up to some parent element   you may consider using event stopPropagation   If you use template inheritance like extends in Django  most probably you have included the script in more than one file which are combined together by include or extend template tags If you are using Django template  you have wrongly placed a block inside another   So  you should either find them out and remove the duplicate import  It is the best thing to do  Another solution is to remove all click event listeners first in the script like     quot  myId quot   off   on  quot click quot   function event    event stopPropagation         You can skip event stopPropagation    if you are sure that the event is not bubbled

User · Answer

Your current code works  you can try it here  http   jsfiddle net s4UyH   You have something outside the example triggering another  click    check for other handlers that are also triggering a click event on that element

User · Answer

If you re using AngularJS  If you re using AngularJS and your jQuery click event is INSIDE THE CONTROLLER  it will get disturbed by the Angular s framework itself and fire twice  To solve this  move it out of the controller and do the following     Make sure you re using   document   or else it won t fire    document  on  quot click quot    quot  myTemplateId  myButtonId quot   function         console log  quot  myButtonId is fired  quot          Do something else       angular module  quot myModuleName quot       controller  quot myController quot   bla bla bla

User · Answer

If you use     document   ready        or     function           more than once  the click function will trigger as many times as it is used

User · Answer

Strange behaviour which I was experienced also  So for me  return false  did the trick                selector    on   click   function                   code             return false

User · Answer

id   off   on  click   function            Worked for me       id   off   on  click   function

User · Answer

In that case  we can do the following     selected   unbind  click   bind  click   function  e      do something          I had the event firing two times initially  when the page get refreshed it fires four times  It was after many fruitless hours before I figured out with a google search   I must also say that the code initially was working until I started using the JQueryUI accordion widget

User · Answer

I ve found that binding an element click in a function that happens more than once will queue it so next time you click it  it will trigger as many times as the binding function was executed  Newcomer mistake probably on my end but I hope it helps   TL DR   Make sure you bind all clicks on a setup function that only happens once

User · Answer

Unless you want your button to be a submit button  code it as    Remove items That should solve your problem  If you do not specify the type for a button element  it will default to a submit button  leading to the problem you identified

[jquery] jQuery Button.click() event is triggered twice

Examples related to jquery

Examples related to function

Examples related to button

Examples related to click