调用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 相关文章推荐
FLASH 广告之外的链接
Dec 16 Javascript
JS控制输入框内字符串长度
May 21 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
Aug 15 Javascript
js 左右悬浮对联广告代码示例
Dec 12 Javascript
你所未知的3种Node.js代码优化方式
Feb 25 Javascript
jQuery实现的简单悬浮层功能完整实例
Jan 23 Javascript
实例详解display:none与visible:hidden的区别
Mar 30 Javascript
js使用原型对象(prototype)需要注意的地方
Aug 28 Javascript
webpack学习教程之前端性能优化总结
Dec 05 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
Jan 25 Javascript
一步步教你利用Docker设置Node.js
Nov 20 Javascript
微信小程序常用赋值方法小结
Apr 30 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
星际中的相关伤害
2020/03/04 星际争霸
php的header和asp中的redirect比较
2006/10/09 PHP
PHP 替换模板变量实现步骤
2009/08/24 PHP
PHP获取MySql新增记录ID值的3种方法
2014/06/24 PHP
PHP进程通信基础之信号
2017/02/19 PHP
JavaScript Date对象使用总结
2009/05/14 Javascript
js获取class的所有元素
2013/03/28 Javascript
instanceof和typeof运算符的区别详解
2014/01/06 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
2014/02/28 Javascript
jQuery中index()的用法分析
2014/09/05 Javascript
JavaScript操作DOM元素的childNodes和children区别
2015/04/01 Javascript
拥Bootstrap入怀——导航栏篇
2016/05/30 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
Vue2.x中的Render函数详解
2017/05/30 Javascript
微信小程序 实现点击添加移除class
2017/06/12 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
2018/03/01 Javascript
基于vue-element组件实现音乐播放器功能
2018/05/06 Javascript
vue实现压缩图片预览并上传功能(promise封装)
2019/01/10 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
2019/10/08 Javascript
python中类变量与成员变量的使用注意点总结
2017/04/29 Python
python实现批量解析邮件并下载附件
2018/06/19 Python
Django中提供的6种缓存方式详解
2019/08/05 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
Pytorch基本变量类型FloatTensor与Variable用法
2020/01/08 Python
关于python tushare Tkinter构建的简单股票可视化查询系统(Beta v0.13)
2020/10/19 Python
俄语地区最大的中国商品在线购物网站之一:Umka Mall
2019/11/03 全球购物
经典c++面试题二
2015/08/14 面试题
校园十佳歌手策划书
2014/01/22 职场文书
社区工作者感言
2014/03/02 职场文书
行政助理工作职责范本
2014/03/04 职场文书
绿化工程实施方案
2014/03/17 职场文书
作文批改评语大全
2014/04/23 职场文书
2014年扶贫帮困工作总结
2014/12/09 职场文书
大学生心理健康活动总结
2015/05/08 职场文书
python字符串的多行输出的实例详解
2021/06/08 Python