调用innerHTML之后onclick失效问题的解决方法


Posted in Javascript onJanuary 28, 2014

最近再写一个项目,用到了innerHTML,但是呢,发现调用innerHTML之后,onclick失效了,这也是在意料之中的,因为innerHTML是以文本形式插入的button,所以无法识别onclick事件,所我们只有另找出路了,我们不能直接实现,但是可以间接实现,下面就举个例子:

例子一:该例子是无法实现的onclick的

<html> 
<head> 
<script defer> 
function insCell(th) var name=th.name; 
var id=th.id; 
if(name=="no"){ 
id.innerHTML="<input type='button' onclick='insCall(this)' value='上线' 
name='no' id='1'>"; 

}else{ 
id.innerHTML="<input type='button' onclick='insCall(this)' value='下线' 
name='yes' id='1'>"; 


} 
</script> 
</head> 
<body> 

<br /> 
<span id="msg"> 
<input type="button" onclick="insCall(this)" value="下线" name="yes" id="1"> 
</span> 
</body> 
</html>

上面的例子是,根据button的name判断是上线,还是下线~~~我们发现,当点击第一次之后,再点击就无效了~~~~~~

这时候我们可以变相的实现,如下:

<html> 
<head> 
<script defer> 
function insCell(th) 
{ 
var name=th.name; 
var id=th.id; 
alert(name+"--"+id); 
var span=document.getElementById(id); 
if(name=="no"){ span.innerHTML="<input type='button' value='下线'>"; 
span.name="yes"; 
}else{ 
span.innerHTML="<input type='button' value='上线'>"; 
span.name="no"; 
} 
} 
</script> 
</head> 
<body> 

<br /> 
<span id="1" onclick="insCell(this)" name="no"> 
<input type="button" value="上线"> 
</span> 
</body> 
</html>
Javascript 相关文章推荐
网站上面有这种切换效果
Jun 26 Javascript
JQuery each()函数如何优化循环DOM结构的性能
Dec 10 Javascript
JQuery+DIV自定义滚动条样式的具体实现
Jun 25 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
Dec 24 Javascript
javascript浏览器兼容教程之事件处理
Jun 09 Javascript
基于WebUploader的文件上传js插件
Aug 19 Javascript
JS闭包的几种常见形式实例详解
Sep 16 Javascript
angular 内存溢出的问题解决
Jul 12 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
Dec 13 Javascript
vue改变对象或数组时的刷新机制的方法总结
Apr 24 Javascript
Vue简单实现原理详解
May 07 Javascript
javascript对象3个属性特征
Nov 17 Javascript
JS判断两个时间大小的示例代码
Jan 28 #Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
Jan 28 #Javascript
js中哈希表的几种用法总结
Jan 28 #Javascript
js日期对象兼容性的处理方法
Jan 28 #Javascript
JS cookie中文乱码解决方法
Jan 28 #Javascript
JS正则表达式验证数字代码
Jan 28 #Javascript
js的隐含参数(arguments,callee,caller)使用方法
Jan 28 #Javascript
You might like
PHP5+UTF8多文件上传类
2008/10/17 PHP
php设计模式之观察者模式的应用详解
2013/05/21 PHP
php实现把数组按指定的个数分隔
2014/02/17 PHP
php删除txt文件指定行及按行读取txt文档数据的方法
2017/01/30 PHP
golang、python、php、c++、c、java、Nodejs性能对比
2017/03/12 NodeJs
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
为JavaScript类型增加方法的实现代码(增加功能)
2011/12/29 Javascript
jquery实现checkbox全选全不选的简单实例
2013/12/31 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
2014/09/10 Javascript
JavaScript的类型、值和变量小结
2015/07/09 Javascript
jQuery超赞的评分插件(8款)
2015/08/20 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
2016/08/30 Javascript
vue中vee validate表单校验的几种基本使用
2018/06/25 Javascript
Vue中CSS动画原理的实现
2019/02/13 Javascript
JavaScript的查询机制LHS和RHS解析
2019/08/16 Javascript
JavaScript 作用域scope简单汇总
2019/10/23 Javascript
JavaScript实现拖拽盒子效果
2020/02/06 Javascript
[02:12]2019完美世界全国高校联赛(春季赛)报名开启
2019/03/01 DOTA
Python中Random和Math模块学习笔记
2015/05/18 Python
Python信息抽取之乱码解决办法
2017/06/29 Python
Python基于pyCUDA实现GPU加速并行计算功能入门教程
2018/06/19 Python
Python3 获取一大段文本之间两个关键字之间的内容方法
2018/10/11 Python
Face++ API实现手势识别系统设计
2018/11/21 Python
python cv2读取rtsp实时码流按时生成连续视频文件方式
2019/12/25 Python
Python基于paramunittest模块实现excl参数化
2020/04/26 Python
Python matplotlib读取excel数据并用for循环画多个子图subplot操作
2020/07/14 Python
python利用faker库批量生成测试数据
2020/10/15 Python
Selenium 配置启动项参数的方法
2020/12/04 Python
请编写一个 C 函数,该函数在给定的内存区域搜索给定的字符,并返回该字符所在位置索引值
2014/09/15 面试题
安全施工标语
2014/06/07 职场文书
竞选学委演讲稿
2014/09/13 职场文书
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书
机器人总动员观后感
2015/06/09 职场文书
《花钟》教学反思
2016/02/17 职场文书
【海涛解说】史上最给力比赛,挑战DOTA极限
2022/04/01 DOTA
volatile保证可见性及重排序方法
2022/08/05 Java/Android