实现情况为：点击“编辑”后，“编辑”文字变成“完成”，再点击伪类元素后的“完成”，此时的“完成”应该变成“编辑”
情况描述为：如果用伪类实现，点击“编辑”后变成“完成”，再点击“完成”，无反应
原因排查为：原“编辑”和后“完成”是同一个span，只是不同类名，但后续动态追加的类名，无法实现点击
【语言烦躁，来示例吧】
html：
.edit{after:"编辑"}
<div class="common">
<span class="edit"></span>
</div>
.complete{after:"完成"}
<div class="common">
<span class="complete"></span> //此complete是点击“编辑”之后，动态追加
</div>
实现效果：点击“完成”之后，重新显示为“编辑”，需在该span标签的父级元素上绑定
js语法：
$(父级selector).on("js事件","点击的子元素",function(){
//实现的事件
});
eg:
//点击“编辑”
$(".common").on("click",".edit",function(){
//实现的事件
})
//点击“完成”
$(".common").on("click",".complete",function(){
//实现的事件
})