jquery click event is firing multiple times when using class selector

akantro_4653 0
Viewed 34763

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?

click css-selectors html jquery
10 Answers

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

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.

user_2388800

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

thenduks_2100

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?

user_2127000

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.

user_122634960
Related