jquery click event is firing multiple times when using class selector

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开发者_StackOverflow 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?

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(){ ..........

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>

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.

Adding these two lines solved it for me:

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

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

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

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.

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

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?

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 .

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.