是什么使jQuery的切換在第二次點擊時觸發兩次？

Question

我有一個由FireWorks生成的HTML頁面，並在其中添加了一些jQuery以達到所需的效果……這是一項痛苦的研究，因此，當您單擊脊柱的一部分時，它會以紅色點亮。 我添加了jQuery的切換選項，以實現“取消點擊”選項的功能，但是它沒有按預期工作。 （類似於我問的上一個問題，但與IMO有所不同）。

當我第一次單擊時，它確實會如預期的那樣亮紅色。 當我第二次單擊時，它又回到未單擊狀態，然后立即又變成紅色，好像兩個觸發事件都被觸發了，是如此之快，以至於第二次點擊甚至都沒有注冊（我知道它確實觸發了；我裝配了帶有警報的偽調試方案，以確保第二個功能已運行。 關於我做錯了什么的任何想法？

這是一些相關的代碼：

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>

值得注意的是生成的HTML片段（包含切片創建的圖像和切片創建的圖像映射的表。我刪除了onclick行為來代替切換，而onMouseOver則是對另一張圖像產生影響）：

   <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-第一次單擊后，jQuery切換似乎會觸發兩次，因此卡在切換位置＃2。

編輯：當我再次單擊時，我得到3個交替警報，然后是4個交替警報，等等。感謝您的有用評論。 希望這可以更容易弄清楚？

謝謝！

Answer 1

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

您不需要注冊click() 。

所以代替：

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

放

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