调用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 相关文章推荐
js文字滚动停顿效果代码
Jun 28 Javascript
解析window.open的使用方法总结
Jun 19 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
Nov 19 Javascript
JavaScript中的toUTCString()方法使用详解
Jun 12 Javascript
超赞的动手创建JavaScript框架的详细教程
Jun 30 Javascript
JavaScript基础重点(必看)
Jul 09 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
Jan 01 Javascript
纯JS实现弹性导航条效果
Mar 06 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
Dec 11 Javascript
详解Vue单元测试Karma+Mocha学习笔记
Jan 31 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
Sep 16 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 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
PHP+XML 制作简单的留言本 图文教程
2009/11/02 PHP
php中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
destoon切换城市后实现logo旁边显示地区名称的方法
2014/08/21 PHP
PHP序列化的四种实现方法与横向对比
2018/11/29 PHP
javascript数组的使用
2013/03/28 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
2013/04/26 Javascript
Javascript writable特性介绍
2015/02/27 Javascript
JS实现网页上随滚动条滚动的层效果代码
2015/11/04 Javascript
jQuery给元素添加样式的方法详解
2015/12/30 Javascript
AngularJS基础 ng-model 指令详解及示例代码
2016/08/02 Javascript
js H5 canvas投篮小游戏
2016/08/18 Javascript
javascript函数中的3个高级技巧
2016/09/22 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
2017/09/22 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
2020/04/11 Javascript
JavaScript实现烟花绽放动画效果
2020/08/04 Javascript
[02:48]DOTA2超级联赛专访海涛:你们的选择没有错
2013/06/07 DOTA
[01:02:00]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第三场 1月24日
2021/03/11 DOTA
用Python和MD5实现网站挂马检测程序
2014/03/13 Python
Python中的filter()函数的用法
2015/04/27 Python
pytorch中tensor的合并与截取方法
2018/07/26 Python
Python语言检测模块langid和langdetect的使用实例
2019/02/19 Python
python设置环境变量的作用和实例
2019/07/09 Python
检测python爬虫时是否代理ip伪装成功的方法
2019/07/12 Python
jupyter notebook插入本地图片的实现
2020/04/13 Python
美国嘻哈文化生活方式品牌:GLD
2018/04/15 全球购物
Casetify官网:自制专属手机壳、iPad护壳和Apple Watch手表带
2018/05/09 全球购物
同程旅游英文网站:LY.com
2018/11/13 全球购物
德国帽子专家:Hutshopping
2019/11/03 全球购物
优秀家长自荐材料
2014/08/26 职场文书
自主招生学校推荐信
2014/09/26 职场文书
社保缴纳证明申请书
2014/11/03 职场文书
2014年学校禁毒工作总结
2014/12/23 职场文书
早会开场白台词大全
2015/06/01 职场文书
教师节联欢会主持词
2015/07/04 职场文书
nginx常用配置conf的示例代码详解
2022/03/21 Servers