更改類與toggleClass後的jQuery事件

我有jQuery和toggleClass（）的問題。我想創建一個div，點擊一個按鈕後關閉。按鈕會改變，當我再次點擊這個按鈕時div會再次打開。更改類與toggleClass後的jQuery事件

問題是：當我點擊按鈕div關閉和按鈕的類改變 - 這很好。但是現在當我用新班級點擊按鈕時 - 什麼都沒有發生。

這裏是我的代碼：

<div class="content"> 
     <div class="contentclose"></div> 
     <p>Text here</p> 
    </div>

和jQuery的：

$(document).ready(function() { 
$(".contentclose").click(
    function() { 
     $(".content").animate({ 
      "height": "45px", 
      "width": "45px", 
      "padding": "0px" 
     }, 1000); 
     $(".content").children("p").animate({ 
      "opacity": "0" 
     }, 1000); 

     $(".contentclose").toggleClass("contentclose contentopen"); 

} 
); 

$(".contentopen").click(
    function() { 
     $(".content").animate({ 
      "height": "400px", 
      "width": "200px", 
      "padding": "50px" 
     }, 1000); 
     $(".content").children("p").animate({ 
      "opacity": "1" 
     }, 1000); 

     $(".contentopen").toggleClass("contentopen contentclose"); 

} 
); });

我希望你能幫助我...

來源

2013-05-14 lackner_media

將'$（「。contentclose」）。toggleClass'和'$（「。contentopen」）。toggleClass'更改爲'$（this）.toggleClass'。 – Omar 2013-05-14 15:57:39

你綁定你的事件處理程序的元素在您的代碼執行綁定時運行時具有那些類。該代碼不會神奇地重新運行，以後重新綁定。

雖然你可以使用活動代表團來獲得類似魔法的東西。更改：

$(".contentclose").click(function...

到

$(document).on("click", ".contentclose", function...

，改變

$(".contentopen").click(function...

到

$(document).on("click", ".contentopen", function...

（理想情況下，使用的容器，這比document靠近按鈕的任何常見。祖先會做。）

將click綁定到祖先元素（在我的示例中爲document），但隨後基於點擊是否始發或通過與事件冒泡時給定選擇器匹配的東西來觸發相關處理程序。

因此，如果點擊次數達到document已從（或通過）.contentclose按鈕冒泡，則我們在該行中附加的處理程序將運行。但是如果它從（或通過）.contentclose按鈕冒泡，則其他處理程序將運行。它是在發生點擊時動態確定的，而不是在您連接處理程序時靜態確定的。

來源

2013-05-14 15:41:59

哦，我從來沒有想過這件事！每次我改變課程時，我總是調用綁定函數！ – 2013-05-14 15:42:56

@RomainBraun :--是的，事件代表團*從根本上*改變了我在幾年前最終完全內化UI時如何連接UI。 – 2013-05-14 15:45:16

並將'$（「。contentclose」）。toggleClass'和$（「。contentopen」）。toggleClass'更改爲'$（this）.toggleClass' :) – Omar 2013-05-14 15:55:05

當文檔準備就緒時，DOM不包含名爲contentopen的類，因此無法綁定contentopen click事件。

來源

2013-05-14 15:42:27

更改類與toggleClass後的jQuery事件

回答

相關問題