jquery click event is firing multiple times when u

问题:

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?

回答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>

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

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

回答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

回答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

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

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

回答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?

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