jquery - 使用toggleClass更改类后的jQuery事件

我对jQuery和toggleClass（）有问题。
我想创建一个div，在单击按钮时将其关闭。按钮更改，当我再次单击该按钮时，div将再次打开。

问题是：当我单击按钮时，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");

}
); });

我希望你能帮帮我...

最佳答案

在将执行绑定的代码运行时，您将事件处理程序绑定到具有这些类的元素。该代码不会神奇地重新运行以在以后重新绑定。

但是，您可以使用事件委托来获得类似于该魔术的功能。更改：

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

至

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

并改变

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

至

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

（理想情况下，请使用比document更靠近按钮的容器。任何共同祖先都可以。）

这样做是将click绑定到祖先元素（在我的示例中为document），然后根据是在事件冒泡时单击是起源还是经过与给定选择器匹配的事件触发相关处理程序。

因此，如果点击是通过（或通过）document按钮冒泡的.contentclose，则将运行我们在该行附加的处理程序。但是，如果它从（或通过）.contentclose按钮冒泡，则另一个处理程序将运行。它是在单击发生时动态确定的，而不是在连接处理程序时静态确定的。