jquery Click-Ereignis wird mehrmals feuern, wenn Klassenauswahl

Question

mit

hier ist mein 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 ein jquery Ereignis binden wiht diesem Code erstellt:

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

     var myId = this.id; 

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

wenn ich auf einen der Links klicken (die li-Gegenstände). Ich dachte, das würde ein Klick-Ereignis auslösen und wenn ich this.id anrufe, würde ich nur die ID des Elements bekommen, auf das ich geklickt habe.

Aber stattdessen sieht es aus wie das:

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

feuert immer und immer wieder einmal dachte ich, auf der einen Link nur angeklickt. Ich legte eine Debugger-Anweisung in ihren und benutzte Firebug und sah, dass diese immer wieder aufgerufen wurde.

Irgendwelche Ideen was ist los?

Answer 1

Wenn Sie Ihre <li> Tags schließen, beheben Sie das Problem. Ich habe es gerade getestet, und das korrigiert es. Sollte seine

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

nicht

<li> 
<li> 

Answer 2

Versuchen Sie, den Wert des id-Attributs in Anführungszeichen zu setzen. Seltsame Dinge passieren, wenn Sie einfach id=1 setzen.

Und woher wissen Sie, dass es mehrmals zündet? Setzen Sie diese Zeile die Spitze der Funktion und beobachten Sie die Firebug einloggen, um zu sehen, was passiert:

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

edit:

Heh, wie andere haben darauf hingewiesen ... Achten Sie darauf, Ihr Markup gültig ist auch : P

Answer 3

Aus dem HTML-Beitrag sieht es so aus, als wären die myLink-DIVs verschachtelt, was dazu führt, dass das Ereignis mehrmals ausgelöst wird, da jedes DIV den Klick erhält. Wie bereits erwähnt, stellen Sie sicher, dass die Tags gut formatiert sind. Sollen die DIV-Tags am Ende jeder Zeile zu schließenden Tags gehören?

Answer 4

Ich hatte ein ähnliches Problem und die Lösung für mich war das Click-Ereignis zu lösen, bevor das Click-Ereignis erklärt. Es macht wenig Sinn, aber ich hatte keine Ahnung, wie die verschiedenen Ereignisse an ein einzelnes HTML-Element hängen. (Und meine HTML sah gültig;))

$ ('remove_lkc '.) Entbinden (' Klick') klicken (function() {..........

Answer 5

Mein Problem war, dass ich meine Veranstaltung in einer Schleife gebunden habe, als ich die <div> s erstellt habe, wodurch das Ereignis für jedes Element des Ereignisses immer wieder hinzugefügt wurde.

Answer 6

diese beiden Zeilen Hinzufügen gelöst es für mich:

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

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

Answer 7

In meinem Fall hatte ich mehrere Tabs die gleiche Teil Rendering und jeder Teil hatte die $ (document). ready() - Aufruf, der das Click-Ereignis dreifach gebunden hat.

Answer 8

Stellen Sie sicher, dass Sie das js-Skript nicht mehrmals einschließen. Wenn Sie ein Framework in der Server-Site verwenden, stellen Sie sicher, dass Layout und Vorlagen nicht dasselbe Skript enthalten.

Answer 9

In meinem Fall muss das Javascript zusammen mit der Ajax-Anfrage gerendert werden.

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

das Ereignis ausgelöst mehrere Zeit .. verwendet .off() alle vorherigen Ereignishandler zu entfernen. (Verwendung derselben Signatur in .on verwendet())

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

Hoffe, dass es jemand hilft ...