调用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 相关文章推荐
JavaScript 浮点数运算 精度问题
Oct 06 Javascript
js最简单的拖拽效果实现代码
Sep 24 Javascript
jquery 按键盘上的enter事件
May 11 Javascript
JQuery动态添加和删除表格行的方法
Mar 09 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
Aug 24 Javascript
原生js图片轮播效果实现代码
Oct 19 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
Nov 25 Javascript
详解使用nvm安装node.js
Jul 18 Javascript
利用babel将es6语法转es5的简单示例
Dec 01 Javascript
angularjs 的数据绑定实现原理
Jul 02 Javascript
详解微信小程序的 request 封装示例
Aug 21 Javascript
详解vue文件中使用echarts.js的两种方式
Oct 18 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 模拟POST|GET操作实现代码
2010/07/20 PHP
Zend的Registry机制的使用说明
2013/05/02 PHP
PHP laravel中的多对多关系实例详解
2017/06/07 PHP
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
javascript Discuz代码中的msn聊天小功能
2008/05/25 Javascript
Javascript 获取链接(url)参数的方法[正则与截取字符串]
2010/02/09 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
CSS图片响应式 垂直水平居中
2015/08/14 Javascript
jQuery获得字体颜色16位码的方法
2016/02/20 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
2016/12/21 Javascript
js选项卡的制作方法
2017/01/23 Javascript
nodejs基础知识
2017/02/03 NodeJs
ES6实现的遍历目录函数示例
2017/04/07 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
[48:22]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python网页解析利器BeautifulSoup安装使用介绍
2015/03/17 Python
用Python编写一个基于终端的实现翻译的脚本
2015/04/24 Python
python 时间戳与格式化时间的转化实现代码
2016/03/23 Python
python爬取网页内容转换为PDF文件
2020/07/28 Python
Python for循环生成列表的实例
2018/06/15 Python
python正则表达式之对号入座篇
2018/07/24 Python
Python中关键字global和nonlocal的区别详解
2018/09/03 Python
浅谈pandas用groupby后对层级索引levels的处理方法
2018/11/06 Python
在Pycharm中自动添加时间日期作者等信息的方法
2019/01/16 Python
django中瀑布流写法实例代码
2019/10/14 Python
Python 模拟生成动态产生验证码图片的方法
2020/02/01 Python
keras 指定程序在某块卡上训练实例
2020/06/22 Python
QT5 Designer 打不开的问题及解决方法
2020/08/20 Python
Python实现微信表情包炸群功能
2021/01/28 Python
国际书籍零售商:Wordery
2017/11/01 全球购物
美国名表在线商城:Ashford(支持中文)
2019/09/24 全球购物
小学三八妇女节活动方案
2014/03/16 职场文书
创意婚礼策划方案
2014/05/18 职场文书
撤诉状格式范本
2015/05/19 职场文书
网络研修心得体会
2016/01/08 职场文书
pytest配置文件pytest.ini的详细使用
2021/04/17 Python