jq添加class后点击事件不生效

jquery 添加class后绑定点击事件不生效，问题还原：现有一个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

相关文章: