click event is calling twice in jquery

Question

I setup a link element and called its click event in jquery but the click event is calling twice  please see below the code of jquery       link button    button    click function             attachmentForm   slideToggle  fast          Please advise   Thanks

User · Answer

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

I solved this problem by change the element type  instead of button I place input  and this problem don t occur more   instesd of    lt button onclick  doSomthing    gt click me lt  button gt    replace with    lt input onclick  doSomthing    value  click me  gt

User · Answer

I too had this issue on FF  My tag was however bound to an  lt a gt  tag  Though the  lt a gt  tag wasn t going anywhere it still did the double click  I swapped the  lt a gt  tag for a  lt span gt  tag instead and the double click issue disappeared    Another alternative is to remove the href attribute completely if the link isn t going anywhere

User · Answer

I faced this issue because my   elem  click function       script was placed inline in a div that was set to style  display none     When the css display was switched to block  the script would add the event listener a second time  I moved the script to a separate  js file and the duplicate event listener was no longer initiated

User · Answer

Make un unbind before the click       link button   unbind  click        link button    button    click function             attachmentForm   slideToggle  fast

User · Answer

please try this      ddlSupervisor   live  change   function  e        if  e handled     true      this makes event to fire only once     getEmployeesbySupervisor        e handled   true

User · Answer

If your event is calling twice or three times  or more  this might help   If you are using something like this to trigger events         js-someclass   click         then pay attention to the number of  js-someclass elements you have on the page  because it ll trigger the click event for all elements     and not just once   A simple fix then is to make sure you trigger the click just once  by selecting just the first element  e g        js-someclass first   click

User · Answer

In my case  the HTML was laid out like this    lt div class  share  gt     lt div class  wrapper  gt       lt div class  share  gt       lt  div gt     lt  div gt   lt  div gt    And my jQuery was like this   jQuery   share   toggle      It confused me because nothing appeared to be happening  The problem was that the inner  shares toggle  would cancel out the outer  shares toggle

User · Answer

Sure thing somewhere else in your script s  the  click  event is being bound again to the same element  as several other answers   comments are suggesting   I had a similar problem and in order to verify that  I simply added a console log command to my script  like in the following snippet       link button        button        click function              console log  DEBUG  sliding toggle                   attachmentForm   slideToggle  fast              If  upon clicking the button  you get something similar to the image below from your browser s developer console  as I did   then you know for sure that the click   event has been bound twice to the same button     If you need a quick patch  the solution proposed by other commentators of using the off method  btw unbind is deprecated since jQuery 3 0  to unbind the event before  re binding it works well  and I recommend it too       link button        button        off  click        click function                  attachmentForm   slideToggle  fast              Unfortunately  this is only a temporary patch  Once the problem of making you boss happy is resolved  you should really dig into your code a little more and fix the  duplicated binding  problem   The actual solution depends of course on your specific use case  In my case  for example  there was a problem of  context   My function was being invoked as the result of an Ajax call applied to a specific part of the document  reloading the whole document was actually reloading both the  page  and the  element  contexts  resulting in the event being bound to the element twice   My solution to this problem was to leverage the jQuery one function  which is the same as on with the exception that the event is automatically unbound after its first invocation  That was ideal for my use case but again  it might not be the solution for other use cases

User · Answer

I got tricked by a selection matching multiple items so each was clicked   first helped       someClass data-foo    notAlwaysUniqueID     first   click

User · Answer

In my case I used the below script to overcome the issue      id   off   on  click  function                    off   unbinds all the events bind to  id  If you want to unbind only the click event  then use off  click

User · Answer

A rather common solution to the two click problem is putting  e stopPropagation     at the end of your function  assuming you use function e  that is    This prevents the event from bubbling up which could lead to a second execution of the function

User · Answer

I am not sure why but I had this problem with     document  on  click     my-element   function  e          When I changed it to       my-element   click function            Problem was solved  But definitely something wrong in my code

User · Answer

When I use this method on load page with jquery  I write     obj   off  click    before set the click function  so the bubble not occurs  Works for me

User · Answer

Calling unbind solved my problem       btn   unbind  click   click function            your code

User · Answer

Make sure and check that you have not accidentally included your script twice in your HTML page

User · Answer

In my case  it was working fine in Chrome and IE was calling the  click   twice  if that was your issue  then I fixed it by return false  after calling the  click   event         txtChat   keypress function event            if  event which    13                    btnChat   click                    txtChat   val                  return false

User · Answer

This is an older question  but if you are using event delegation this is what caused it for me   After removing  delegate-two it stopped executing twice  I believe this happens if both delegates are present on the same page       delegate-one   delegate-two   on  click     button   function            CODE

User · Answer

My simple answer was to turn the click bind into a function and call that from the onclick of the element - worked a treat  whereas none of the above did

User · Answer

It means your code included the jquery script twice  But try this       btn   unbind  click   click function       your code

User · Answer

I had the same problem  but you can try changing this code      link button    button    click function             attachmentForm   slideToggle  fast          to this       link button   button        link button   unbind  click   click function             attachmentForm   slideToggle  fast          For me  this code solved the problem  But take care not to accidentally include your script twice in your HTML page  I think that if you are doing these two things correctly  your code will work correctly   Thanks

User · Answer

I tried    e stopImmediatePropagation     This seems to work for me

User · Answer

this snippet of code contains nothing bad  It s another part of your script as  karim told

User · Answer

This is definitely a bug specially while it s FireFox  I searched alot tried all the above answers and finally got it as bug by many experts over SO  So  I finally came up with this idea by declaring variable like  var called   false      ColorPalete li   click function         if  called                     called   true               setTimeout function       lt -----This can be an ajax request but keep in mind to set called false when you get response or when the function has successfully executed                   alert  I am called                     called   false                 3000                In this way it first checks rather the function was previously called or not

User · Answer

Had the same problem  This worked for me -      selector   once   click function          Hope this helps someone

User · Answer

Adding e preventDefault    at the start of my function worked for me

[jquery] click() event is calling twice in jquery

Examples related to jquery