关于伪类after后续追加，实现js事件（如点击事件）

实现情况为：点击“编辑”后，“编辑”文字变成“完成”，再点击伪类元素后的“完成”，此时的“完成”应该变成“编辑”

情况描述为：如果用伪类实现，点击“编辑”后变成“完成”，再点击“完成”，无反应

原因排查为：原“编辑”和后“完成”是同一个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(){

　　//实现的事件

})