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?

Answer 1

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>

Answer 2

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

Answer 3

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.

Answer 4

Adding these two lines solved it for me:

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

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

Answer 5

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

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

Answer 7

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

Answer 8

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?

Answer 9

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 .