Qu'est-ce qui pourrait faire que le toggle de jQuery se déclenche deux fois au second clic?

Question

J'ai une page HTML générée par FireWorks et j'ai ajouté quelques jQuery pour les effets désirés ... c'est pour une étude de la douleur, donc quand vous cliquez sur une partie de la colonne vertébrale, elle s'allume en rouge. J'ai ajouté la bascule de jQuery pour une sorte d'option "unclick", mais cela ne fonctionne pas comme prévu. (Similaire à une question précédente que j'ai posée, mais assez différente IMO).

Lorsque je clique la première fois, il s'allume en rouge comme prévu. Quand je clique sur la deuxième fois, il revient à non cliqué, puis revient instantanément au rouge, comme si les deux événements bascule ont été tirés, si vite que c'est comme si le deuxième clic ne s'enregistrait même pas (je sais que ça tire, je truqué un schéma de pseudo-débogage avec des alertes pour s'assurer que la seconde fonction a été exécutée). Des idées sur ce que j'ai fait de mal?

Voici une partie pertinente:

scripts jQuery.

<script type="text/javascript"> 
$(document).ready(function(){ 
    $("img.toggle1").click(function(){ 
     $("img.toggle1").toggle(function(){ 
     alert('first click'); 
      $(this).attr('src', 'images/cervical_s7.jpg'); 
     }, function(){ 
      alert('second click'); 
      $(this).attr('src', 'images/cervical_s1.jpg'); 
     }); 
    }); 
}); 
</script> 

extraits dignes de mention de HTML généré (la table contenant l'image créée par la tranche, et le plan de l'image créée par la tranche I supprimé le comportement onclick à la place de la bascule et le onMouseOver est un effet sur une autre image):

<td rowspan="2"><img name="cervical_s1" class="toggle1" src="images/cervical_s1.jpg" 
    width="185" height="121" border="0" id="cervical_s1" usemap="#m_cervical_s1" 
    alt="" /></td> 

<map name="m_cervical_s1" id="m_cervical_s1"> 
<area shape="poly" class="toggleCerv" coords="159,0,154,29,151,57,154,95,165, 
     113,185,121,0,121,14,111,23,93,24,43,19,0,48,7,96,7,140,3,159,0,159,0" 
     href="javascript:; alt="" onmouseover="MM_swapImage 
     ('sign_s1','','images/sign_s2.jpg',1);" /> </map> 

tl; dr - bascule jQuery semble tirer deux fois après le premier clic, donc il est coincé dans la position # 2.

EDIT: Lorsque je clique à nouveau, je reçois 3 alertes en alternance, puis 4 alertes en alternance, etc. Merci pour le commentaire utile. Espérons que cela le rendra plus facile à comprendre?

Merci!

Answer 1

Regardez http://api.jquery.com/toggle/

Vous ne devez vous inscrire click().

Ainsi, au lieu de:

$("img.toggle1").click(function(){ 
     $("img.toggle1").toggle(...); 
    }); 

Mettre

$("img.toggle1").toggle(...);