【jquery】给元素addClass并绑定点击事件，点击事件不生效的解决办法

问题还原：

现有一个div，我们在点击时，把原来class给去掉，并给它添加一个新的class，然后监听这个新的class的点击事件，但是没生效。

代码如下：

<body>
    <div class="open">展开</div>
    <script>
        $(".open").click(function () {//展开
            console.log("open----");
            $(this).removeClass("open").addClass("close");
            $(this).html("收起");
        })
        $(".close").click(function () {//收起
            console.log("close----");
            $(this).removeClass("close").addClass("open");
            $(this).html("展开");
        })
    </script>
</body>

此时，点击页面中的"展开"，然后，看到控制台打印"open----"，并且文字变成"收起"，并且看到元素中的class只有"close"。但是在点击"收起"时，看到控制台还是打印"open----"，并没有像预期一样。

是为什么呢？

因为呀，在第一次点击之后，dom没有重新加载。。。

解决办法，如下代码：

<script>
    $(document).on("click", ".open", function () {
        console.log("open----");
        $(this).removeClass("open").addClass("close");
        $(this).html("收起");
    })
    $(document).on("click", ".close", function () {
        console.log("close----");
        $(this).removeClass("close").addClass("open");
        $(this).html("展开");
    })
</script>

题外话，上面的功能我们无非就是想根据class实现文字的切换，上面的代码还可以写成这样：

<body>
    <div class="operate open">展开</div>
    <script>
        $(".operate").click(function () {
            if ($(this).hasClass("open")) {//展开
                console.log("open----");
                $(this).removeClass("open");
                $(this).html("收起");
            } else {//收起
                console.log("close----");
                $(this).addClass("open");
                $(this).html("展开");
            }
        })
    </script>
</body>

原文链接：https://blog.csdn.net/qq_33237207/article/details/101021840