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

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

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

原因排查为：原“编辑”和后“完成”是同一个span，只是不同类名，但后续动态追加的类名，无法实现点击

【语言烦躁，来示例吧】

html：

.edit{after:"编辑"}

.complete{after:"完成"}

  //此complete是点击“编辑”之后，动态追加

实现效果：点击“完成”之后，重新显示为“编辑”，需在该span标签的父级元素上绑定

js语法：

$(父级selector).on("js事件","点击的子元素",function(){

//实现的事件

});

eg:

//点击“编辑”

$(".common").on("click",".edit",function(){

//实现的事件

})

//点击“完成”

$(".common").on("click",".complete",function(){

//实现的事件

})

js触发按钮点击事件

js触发按钮点击事件 博客分类: javascript   模拟JS触发按钮点击功能

usually function&l ...

JS怎样将拖拉事件与点击事件分离？

帖子:http://bbs.csdn.net/topics/390785395?page=1#post-397369340 怎样将拖拉事件跟点击事件分离? 须要做到:拖拉时不触动点击事件

js中的点击事件(click)的实现方式

1

js模拟自动点击事件

1.直接上代码很直观

&l ...

js/jquery 禁用点击事件

前言 工作中经常遇到这种情况:验证邮箱页面的重新发送需要在3分钟后才可以点击触发请求,所以在这之前需要禁用他的点击. 网上查了后有以下几种实现方法 1.css禁用鼠标点击事件 .disabled { ...

js 触发LinkButton点击事件，执行后台方法

页面

bootstrap table 生成的表格里动态添加HTML元素按钮，JS中添加点击事件，点击没反应---解决办法

bootstraptable中onExpandRow属性---js  方法添加的 html代码,然后给这代码里面的 元素 添加 事件,却获取不该元素.(称之为未来元素),由于是未来的 所以现在没有这个 ...

jq再次封装自己的ajax & js 回调函数 & js方法注释&js 全局屏蔽点击事件及a标签

1.封装成一个独立JS var commonUrl = 'http://xx.xxx.com/'; function http({ url, type = "post", data ...

随机推荐

js 动态添加input代码

word2013删除下载的模板

word2013删除下载的模板 删除步骤: 1)关闭相关的word文档. 2)按照以下的路径找到相应的位置:"%系统根目录%\Users\Administrator\AppData\Roam ...

centos6.6编译安装lnmp系列之nginx

简介: 环境:虚拟机+centos6.6 Cmake下载地址:http://www.cmake.org/files/v3.0/cmake-3.0.2.tar.gz Nginx 下载地址: http:/ ...

(转)Android SlidingTabLayout定制分割线和指示条颜色

本文转载与:http://blog.csdn.net/zhangphil/article/details/48863347 Android SlidingTabLayout默认的滑动指示条是系统默认的 ...

Rails学习：create操作 局部模板

学习Ruby on Rails实战真经 里面说rails4使用了strong parameters, 所以代码这么写:注意不是Event.new(params[:event])了,而是参数是函数返回值 ...

[面试题总结及扩展知识]HTTP协议返回状态码的问题

经常在网页中看到一些错误的返回信息,见一个查一个已经累感不爱,在2014年腾讯笔试题中也见到一道这样的问题,所以现在来总结一下: 腾讯2014面试题: 答案选B 附带一些http协议的错误代码: 当服 ...

ORACLE ORDER BY用法总结

order by后面的形式却比较新颖(对于我来说哦),以前从来没看过这种用法,就想记下来,正好总结一下ORDER BY的知识. 1.ORDER BY 中关于NULL的处理 缺省处理,Oracle在Or ...

Dev之ChartControl控件(一)

ChartControl控件主要包括Chart Title,Legend,Annotations,Diagram,Series五部分:如图: 1.  用RangeControl控件控制ChartCon ...

Spring入门介绍(一)

Spring是一个轻量级控制反转(IOC)和面向切面(AOP)的容器框架,它主要是为了解决企业应用开发的复杂性而诞生的. 目的:解决企业应用开发的复杂性. 功能:使用基本的javaBean代替EJB. ...

从客户端浏览器直传文件到Storage

关于上传文件到Azure Storage没有什么可讲的,不论我们使用哪种平台.语言,上传流程都如下图所示: 从上图我们可以了解到从客户端上传文件到Storage,是需要先将文件上传到应用服务上,然后再 ...