jQuery class click - multiple elements click event once

Question

I have multiple classes on a page of the same name  I then have a  click   event in my JS  What I want to happen is the click event only happen once  regardless of multiple classes on my page   The scenario is that I am using AJAX to add to cart  Sometimes on the home page there might be a featured product and a top offer which means that the same class  add   productid  is there and when clicked the add to cart AJAX is fired twice   I thought about making  click areas  so I would have  container-name  add   pid  therefore giving unique clicks   Is this the only solution    lt div class  addproduct 151  gt product info lt  div gt   lt div class  addproduct 151  gt product info lt  div gt   lt div class  addproduct 151  gt product info lt  div gt   lt div class  addproduct 151  gt product info lt  div gt   lt div class  addproduct 151  gt product info lt  div gt        addproduct   click function     do something fired 5 times

User · Answer

Just do below code it s working absolute fine      addproduct   on  click   function event       event stopPropagation        event stopImmediatePropagation        getRecord          function getRecord           addproduct   each function             console log  test

User · Answer

Could we see your click handler  You re attaching 5 listeners to 5 different elements  However  when the user clicks on the element  only one event is fired       addproduct   click function         Holds the product ID of the clicked element   var productId     this  attr  class   replace  addproduct            addToCart productId         If this solution doesn t work I d like to look at your click handler

User · Answer

In this situation I would try     document  on  click    addproduct   function           your code here         then  if you need to perform something in the other elements with the same class on click on one ot them you can loop through the elements     document  on  click    addproduct   function           addproduct   each  function             your code here

User · Answer

your event is triggered only once    so this code may work try this          addproduct  addproduct  addproduct  addproduct  addproduct   click function     do     something fired 5 times

User · Answer

I tried it myself in my project   All my rows in a table have a class  contact      My code looks like this   var contactManager        contactManager showEditTools   function row      console debug row          contact   click function event     console log  this should appear just once       alert  I hope this will appear just once       contactManager showEditTools event         And I was first scared to see my whole rows as a result in the Firebug console when I executed the code     But then I realized that the click event was not fired  because no alert-dialog appeared  Firebug shows you just the elements which are affected by the click overiding  So there is nothing to worry

User · Answer

This question have been resolved and also got a lot of responses  but i want to add something to it  I was trying to figure out  why my click element his firing 77 times  and not one time   in my code  i had an each  running a json response and displaying it as divs with buttons  And then i declared the click event inside the each     data  each function        button       lt button gt         button addClass  test-button        button appendTo  body             test-button   click function            console log  i was clicked                If you write your your code like this  the class  test-button will get multiple click events  For example  my data has 77 lines  so the each will run 77 times  that means i will decline the click event on the class 77 times  When you click the element  it will be fired 77 times   But if you wirte it like this     data  each function        button       lt button gt         button addClass  test-button        button appendTo  body                test-button   click function            console log  i was clicked             you are declaring the click element after the each  That means  the each will run its 77 times  and the click element will be declared only one time  So  if you click the element  it will be fired only one time

User · Answer

when you click div with addproduct class one event is fired for that particular element  not five  you re doing something wrong in you code if event is fired 5 times

User · Answer

I think you add click event five times  Try to count how many times you do this   console log  add click event       addproduct   click function

User · Answer

I solved it by using inline jquery function call  like   lt input type  text  name  testfield  onClick  return testFunction this     gt     lt script gt    function testFunction current           your code go here      lt  script gt

User · Answer

x000D   x000D    document  ready function    x000D   x000D          addproduct   each function    x000D              this  unbind   click function    x000D                 console log  div is clicked  my content   gt        this  html     x000D                 x000D           x000D       x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt div class  addproduct 151  gt product info 1 lt  div gt  x000D   lt div class  addproduct 151  gt product info 2 lt  div gt  x000D   lt div class  addproduct 151  gt product info 3 lt  div gt  x000D   lt div class  addproduct 151  gt product info 4 lt  div gt  x000D   lt div class  addproduct 151  gt product info 5 lt  div gt  x000D   x000D   x000D

User · Answer

Simply enter code hereIn JQuery  ones event is triggered you just check number of occurrences of classes in file and use for loop for next logic  for identify number of occurrences of any class  tag or any DOM element through JQuery   var len       addproduct   length         addproduct   click function           var len       addproduct   length          for var i 0 i lt len i

User · Answer

This should fix it and should be a good habit   unbind        addproduct   unbind   click function         do something

User · Answer

I had the same problem  The cause was that I had the same jquery several times  He was placed in a loop         AddProduct    click  function               AddProduct    click  function               AddProduct    click  function               AddProduct    click  function               AddProduct    click  function           For this reason was firing multiple times

User · Answer

Hi sorry for bump this post just face this problem and i would like to show my case   My code look like this    lt button onClick  product delete  1    class  btn btn-danger  gt Delete lt  button gt   lt button onClick  product delete  2    class  btn btn-danger  gt Delete lt  button gt   lt button onClick  product delete  3    class  btn btn-danger  gt Delete lt  button gt   lt button onClick  product delete  4    class  btn btn-danger  gt Delete lt  button gt    Javascript code   lt script gt   var product              Define your function       add   product id   gt                 Do some thing here                delete   product id   gt                Do some thig here            lt  script gt

User · Answer

document  on  click     addproduct   function             your function here

User · Answer

Apologies for bumping this old thread  I had the same problem right now  and I wanted to share my solution       yourButtonClass   on  click   function event       event stopPropagation        event stopImmediatePropagation               rest of your JS code        event StopPropagation and event StopImmediatePropagation   should do the trick   Having a  class selector for Event handler will result in bubbling of click event  sometimes to Parent element  sometimes to Children elements in DOM    event StopPropagation   method ensures that event doesn t bubble to Parent elements  while event StopImmediatePropagation  method ensures that event doesn t bubble to Children elements of desired class selector     Sources  https   api jquery com event stoppropagation  https   api jquery com event stopimmediatepropagation

User · Answer

I just had the same problem  In my case PHP code generated few times the same jQuery code and that was the multiple trigger    lt a href   popraw  class  report  rel  884 PHP MULTIPLE GENERATER NUMBERS   gt Popraw   Zglos lt  a gt     PHP MULTIPLE GENERATER NUMBERS generated also the same code multiple times    lt script type  text javascript  gt      report   click function           lt  script gt    My solution was to separate script in another php file and load that file ONE TIME

User · Answer

Try making use of the  off   handler     function              archive-link   click function  e            var linkObj     this           var cb       confirm-modal            cb find   modal-body   append   lt p gt Warning message  lt  p gt             cb modal  show             cb find   confirm-yes   click function                    this  off      detach this event               ajax call yada yada               I attach a click event handler on an OK modal button to act on click event of the object with class  archive-link    On the first click  the event fires only on that  archive-link object that I asked the function to act on  var linkObj   But when I click the same link the second time and hit OK on the modal  the event fires on every object that has  archive-link that I clicked before   I used the solutions above but unfortunately did not work  It was when I called  off   within the modal OK button click function that the propagation stopped  I hope this helps

[jquery] jQuery $(".class").click(); - multiple elements, click event once

Examples related to jquery