slideToggle在一次調用中執行兩次

我不能在此處顯示實例，但我看不到slideToggle如何被調用兩次。它被點擊鏈接調用。slideToggle在一次調用中執行兩次

這裏：

// initialize the jquery code 
$(function(){ 
    $('div.slideToggle a').click(function(){ 
    $(this).parent().siblings('div.remaining-comments').slideToggle('slow',function(){ //'this' becomes the remaining-comments. 
    var hidden = $(this).siblings('div.slideToggle').find('input').val(); 
    if($(this).siblings('div.slideToggle').find('a').html().substr(0,4) == 'Show'){ 
    $(this).siblings('div.slideToggle').find('a').html('Hide comments'); 
    } 
    else { 
    $(this).siblings('div.slideToggle').find('a').html(hidden); 
    } 
    }); 
    }); 
});

它是爲了顯示和隱藏一個博客頁面上額外的評論。然而，它是顯示然後隱藏在一個點擊。我已經在'if'和'else'中都發出警告，並且都出現了，那麼它是如何被調用兩次的呢？

顯然，當鏈接包含文本'顯示'它顯示隱藏的div，並且當再次點擊時它不會找到'顯示'，因此會隱藏div。有趣的是，它的運行非常完美。它在公司內聯網上，所以我想也許別的東西可能會影響它，但我真的不知道如何。

來源

2010-09-30 Alex B

當頁面重新初始化時，可能您的文檔已準備好被調用多次，要做的最好的事情是在將新事件綁定到它之前解除綁定。

這樣，您就不必單擊事件1元

開往兩次嘗試這個辦法：

$('div.slideToggle a').unbind('click').click(function(){ 
    // your code here 
});

UPDATE：

這種上述情況的問題是，你必須將它再次綁定到第一次綁定click函數後添加的每個額外元素。

您可以通過在保留在dom中的父項上綁定1個單擊處理程序來修復此問題。給它一個子選擇器作爲參數。

它導致只添加1個點擊處理程序，而不是每個元素1個。所以你應該贏得性能，代碼執行時間和你寫的javascript數量。

例如：

比方說您有一個列表，你dinamically增加新的元素

<ul id="ContactList"> 
    <li>John Doe <a href="#">Like</a></li> 
    <li>Jane Doe <a href="#">Like</a></li> 
    <li>Josh Doe <a href="#">Like</a></li> 
    <li>Jeff Doe <a href="#">Like</a></li> 
</ul>

與你綁定錨標記上的某些功能被點擊

$(function(){ 

    $('#ContactList').on('click', 'li a', function(e){ 
     // do your thing here... 
     var el = $(e.currentTarget); 
     el.addClass('iLikeYou'); 
    }); 

});

當它現在無論您稍後添加多少項目，它都會起作用。，因爲它接受ul#ContactList內的任何位置的點擊，並且只有在點擊的元素與選擇器li a匹配時纔會執行回調。

而$('#ContactList li a')將首先獲取所有元素，然後將點擊綁定到所有選定的項目。之後新增的項目沒有點擊事件，需要首先綁定它們。

來源

2010-09-30 10:56:53 Sander

這不是最好的解決辦法...對待這個問題不症狀，如果它正在運行兩次，*爲什麼*？沒有理由兩次運行所有'ready'處理程序代碼，這是非常低效的。另外如果其他'click'處理程序綁定到該元素？ – 2010-09-30 10:59:16

我認爲它必須與.ready被多次調用。我們的頁面是大量不同代碼片段的混合。所以可重用的函數被放在單獨調用.ready中。取消綁定爲我做了竅門，謝謝。 – 2010-09-30 11:07:06

我知道尼克，但我不知道爲什麼他的準備好聲明是兩次運行，所以我不能暗示可能的解決方案。 allthough我應該補充說，這是一個解決方法，而不是本身的修復。 – Sander 2010-10-06 10:01:56

-1

小心移動或包裹包含腳本塊的元素。這可能會導致代碼被執行兩次。解除綁定是一種解決方法，但更好地將您的js移動到頁面的頭部或底部。

來源

2013-05-01 07:43:07 Justin

我已經很晚了，但slideToggle()函數會爲它切換的每個元素調用complete函數。

可能有多個$(this).parent().siblings('div.remaining-comments')。

來源

2016-06-30 20:33:57 Simon

只要使用e.stopPropagation（）;在開始（和功能（E）{）爲我修好了。

來源

2016-07-19 00:14:16

序幕

回答你的問題，指出了一些很奇怪的jQuery。當我嘗試隱藏/滑動div並顯示/滑動另一個div（在jquery/Ajax導航站點中）時，我遇到了這個問題，不知道哪些div已經可見。

可能的答案

當一個jQuery調用在同一呼叫一個以上的元素，功能被執行一次以上。

爲例

$("#div_one, #div_two").hide("slow", function() { 
    $("#div_two").show("slow"); 
});

- > #div_two會出現，消失，然後再次出現，因爲鏈接的功能會觸發兩次。

其它附加信息

同樣的事情發生一起多元素類的調用。

解決方案

就我而言，我只是決定做不同的事情。第一個div只消失（沒有幻燈片效果），新的可以有幻燈片效果。這樣，在觸發新div之前，我不需要等待第一個div滑動，所以我不必將第二個命令封裝到鏈接函數中。

在本例中，僅警報觸發一次：

$("#div_one, #div_two").hide(); 
$("#div_two").show("slow"); 
});

它改變了用戶體驗，但它的作品...

來源

2016-10-04 14:53:27 MMB

slideToggle在一次調用中執行兩次

回答

相關問題