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

0 评论
内联反馈
查看所有评论