【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>
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
1
0- 0
已为社区贡献2条内容
所有评论(0)