jquery click event is firing multiple times when using class selector

Question

here is my html

<li><div class="myLink" id=1>A<div>
<li><div class="myLink" id=2>b<div>
<li><div class="myLink" id=3>c<div>
<li><div class="myLink" id=4>d<div>
<li><div class="myLink" id=5>d<div>
<li><div class="myLink" id=6>e<div>
<li><div class="myLink" id=7>d<div>
<li><div class="myLink" id=8>g<div>

i created a jquery event bind wiht this code:

    jQuery(".myLink").click(function(event) {

         var myId = this.id;

         location.href = '/x/y?myId=' + myID;
   });

when i click on one of the links (the li items). i thought that would fire one click event and when i call this.id, i would just get that id of the item that i clicked.

But instead it looks like the:

   jQuery(".myLink").click(function(event) {

is firing over and over again even thought i just clicked on one link. I put a debugger statement in their and used firebug and saw this getting called over and over.

Any ideas whats going on?

Leniel Maccaferri · Accepted Answer · 2013-01-05 13:07:13Z

69

I had a similar problem and the solution for me was to unbind the click event before declaring the click event. Doesn't make much sense but I had no idea how the multiple events get attached to a single HTML element. ( and my HTML looked valid ;) )

$('.remove_lkc').unbind('click').click(function(){ ..........

edited Jan 5, 2013 at 13:07

Leniel Maccaferri

103k48 gold badges381 silver badges495 bronze badges

answered Nov 18, 2010 at 18:36

user512568

7051 gold badge5 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

groundh0g Over a year ago

I had the problem described in OP, but my HTML was well-formed. The fix posted by @user512568 worked for me. Thanks for sharing.

Riko Over a year ago

If that fixed it, you were probably rebinding the click event somewhere along the way. Re-binding basics are discussed here: learningjquery.com/2008/05/working-with-events-part-2

Shawn Whinnery Over a year ago

Had a similar problem. $('.class').on('click', function(){}); was only applying event listeners to every other element. Not sure why but unbinding first seems to have fixed it. Thank you!

Erik · Accepted Answer · 2010-01-07 23:31:05Z

18

If you close your <li> tags, you'll fix the problem. I've just tested it, and that corrects it. Should be

<li> ... </li>
<li> ... </li>

not

<li>
<li>

answered Jan 7, 2010 at 23:31

Erik

20.7k8 gold badges47 silver badges77 bronze badges

1 Comment

aamir sajjad Over a year ago

I had a similar problem with img tag, so @Erik is right. I reckon, every tag should have </> closing tag to get rid of this issue.

Pratik Khadloya · Accepted Answer · 2012-03-22 00:54:31Z

14

In my case, i had multiple tabs rendering the same partial and each partial had the $(document).ready() call which binded the click event thrice.

answered Mar 22, 2012 at 0:54

Pratik Khadloya

12.9k12 gold badges86 silver badges106 bronze badges

1 Comment

James Alday Over a year ago

D'oh! I stuck my js into the top of the partial template just to test it out while I was working on it and it was firing four times. Had me scratching my head as the other comments didn't seem to fit my situation, so thanks for pointing this out! I totally forgot I was using the template elsewhere in other tabs...

Johan B · Accepted Answer · 2011-12-15 11:07:59Z

9

Adding these two lines solved it for me:

event.stopPropagation();
event.preventDefault();

Source: http://code.google.com/intl/en/mobile/articles/fast_buttons.html

answered Dec 15, 2011 at 11:07

Johan B

1,9761 gold badge22 silver badges40 bronze badges

Comments

rfunduk · Accepted Answer · 2010-01-08 00:19:41Z

6

Try putting the value of the id attribute in quotes. Strange things happen when you just put id=1.

Also, how do you know it's firing multiple times? Put this line the top of the function and watch the firebug log to see what's happening:

console.log( "clicked on", jQuery(this), "which has id", jQuery(this).attr('id') );

edit:

Heh, as others have pointed out... Make sure your markup is valid too :P

edited Jan 8, 2010 at 0:19

answered Jan 7, 2010 at 23:12

rfunduk

30.5k5 gold badges61 silver badges55 bronze badges

4 Comments

PHLAK Over a year ago

Agreed. Use id="1", id="2", id="3", etc.

alex Over a year ago

I'd also recommend closing your div and li elements properly.

Erik Over a year ago

having the ID attribute in tags will have no effect, just FYI

alex Over a year ago

do you mean having the id attribute's value in quotes will have no effect? For one, it's invalid XHTML.

Leniel Maccaferri · Accepted Answer · 2013-01-05 13:09:33Z

6

My issue was that I had my event binding in a loop when I created the <div>s, thus adding the event over and over for each item in the event. It's just something to double check.

edited Jan 5, 2013 at 13:09

Leniel Maccaferri

103k48 gold badges381 silver badges495 bronze badges

answered Apr 2, 2011 at 5:25

chrishawn

5881 gold badge5 silver badges12 bronze badges

1 Comment

user1507720 Over a year ago

Exactly this issue. I was using a class selector $(".class").click(function()) inside the loop so I was adding multiple click handlers every loop iteration. Make sure your .click handler is setup outside the loop.

chris · Accepted Answer · 2014-12-06 07:34:22Z

4

In my case, the javascript has to be rendered along with the ajax request.

$(document).ready(function(){
    $(document).on('click','.className',function(){alert('hello..')})
});

the Event fired multiple time.. used .off() to remove all previous event handlers. ( use same signature used in .on() )

$(document).ready(function(){
    $(document).off('click','.className');
    $(document).on('click','.className',function(){alert('hello..')});
});

Hope it helps some one...

answered Dec 6, 2014 at 7:34

chris

6078 silver badges11 bronze badges

Comments

leepowers · Accepted Answer · 2010-01-07 23:29:54Z

1

From the HTML posted it looks like the myLink DIVs are nested, causing the event to be fired multiple times, as each DIV is getting the click. As noted, make sure the tags are well-formed. Are the DIV tags at the end of each line supposed to be closing tags?

answered Jan 7, 2010 at 23:29

leepowers

38.4k24 gold badges103 silver badges132 bronze badges

Comments

Snake_Tn · Accepted Answer · 2013-09-02 14:07:04Z

1

Make sure you are not including the js script multiple times. if you are using a framework in server site, be sure that layout and templates are not including the same script .

answered Sep 2, 2013 at 14:07

Snake_Tn

111 bronze badge

Comments

inputforcolor · Accepted Answer · 2019-11-19 11:25:25Z

I believe the most of the time it is firing multiple times is that some how we put that in a loop or a in a condition where we are binding that multiple times causing to fire more than once. check your code and make sure that you are not binding the event multiple times.

in my case i have below event
--------------------------------------------------------------------
    bindSelectYesNoHeathCare = () =>
    {
        $(document).on('click', '.healthCareTypeClass', function (event)
    }

   showHideDivs = (id: number,
                    changeNavigationMenu: boolean = true,
                    loadDataFromServer:boolean = false,
                    validateHealthCareScreens = false) =>
    {
       ChildMgr.bindSelectYesNoHeathCare(); 
    }

I was binding that against another event where on each click, it was binding again causing to fire multiple times.

Collectives™ on Stack Overflow

jquery click event is firing multiple times when using class selector

10 Answers 10

3 Comments

1 Comment

1 Comment

Comments

4 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

3 Comments

1 Comment

1 Comment

Comments

4 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related