切換不能在顯示作品的相同元素上工作

我正嘗試使用JQuery切換，因此當用戶單擊信息圖標時，隱藏的包含項目信息的div將顯示/隱藏。由於某種原因，它不適合我。切換不能在顯示作品的相同元素上工作

在嘗試調試時，我注意到show（）正確顯示了我想要切換的目標元素。但是，當我用toggle()替換show()時，它不起作用並且不返回任何錯誤。

我想知道如果有人能幫我找出這個問題的原因。

我的標記

<div class="option">  
    <div class="prod-text">Toy Whistle </div> 
    <div> 
     <img class="info-icon" src="Info-icon.png"> 
    </div> 
    <div class="option-info" style="display:none;"> 
     <div> 
      <div class="price-text">Price: $100</div> 
      <div class="prod-id-text">Item Number: 231912</div> 
      <div class="quantity-text">Quantity: 72</div> 
     </div> 
    </div> 
</div>

JQuery的提前（不工作）

$(".info-icon").click(function(){ 
    $(this).parent().parent().find('.option-info').toggle(); 
});

JQuery的（作品！）

$(".info-icon").click(function(){ 
    $(this).parent().parent().find('.option-info').show(); 
});

非常感謝！

來源

2013-03-02 AnchovyLegend

似乎很適合我：http://jsfiddle.net/a2pDx/。你能提供更多的信息或可運行的例子嗎？ – 2013-03-02 02:44:16

它在小提琴上工作：http://jsfiddle.net/bZ4j9/ – SRy 2013-03-02 02:44:41

@esker，謝謝你的回覆。我正在嘗試，但它是太多的代碼：/關於如何開始調試這樣的問題的任何建議？上面的代碼是在AJAX調用之後生成的。所以有AJAX，JavaScript和大量的標記（包括1000多行），否則我會發布它... – AnchovyLegend 2013-03-02 02:48:49

也許點擊事件處理程序被綁定兩次，並因此每次點擊觸發兩次。在這種情況下，show()會正常工作，但是toggle()會在每次單擊時顯示並立即隱藏該元素。試試這個：

$(".info-icon").click(function(){ 
    console.log('click handler fired'); 
    $(this).parent().parent().find('.option-info').toggle(); 
});

而且隨着網絡督察或Firebug的啓用，看看有多少消息被記錄爲每次點擊運行此。

來源

2013-03-02 02:53:39

+1，非常感謝@esker的幫助！我最終使用你的'console.log'建議修復了這個問題，這是一個很好的調試工具，從來沒有用過它！ – AnchovyLegend 2013-03-02 03:12:21

我很感激它:)問題是由於在一個懸停內有'info-icon'單擊事件監聽器事件監聽器，並導致它無緣無故地多次觸發。現在它每次點擊只發射一次。 – AnchovyLegend 2013-03-02 03:14:31

切換不能在顯示作品的相同元素上工作

回答

相關問題