使用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...

to

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

并改变

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

to

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

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

所做的就是绑定click到祖先元素（document在我的示例中），但然后根据事件冒泡时单击是源自还是通过与给定选择器匹配的内容来触发相关处理程序。

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