更改类与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事件

回答

相关问题