调用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 触发事件列表 比较不错
Sep 03 Javascript
jQuery控制图片的hover效果(smartRollover.js)
Mar 18 Javascript
JS实现距离上次刷新已过多少秒示例
May 23 Javascript
学习JavaScript编程语言的8张思维导图分享
Mar 27 Javascript
用javascript实现自动输出网页文本
Jul 30 Javascript
整理Javascript函数学习笔记
Dec 01 Javascript
AngularJS入门教程之XHR和依赖注入详解
Aug 18 Javascript
Vue.js动态添加、删除选题的实例代码
Sep 30 Javascript
Node.js之网络通讯模块实现浅析
Apr 01 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
Nov 12 Javascript
vue 中的 render 函数作用详解
Feb 28 Javascript
vue 修改 data 数据问题并实时显示操作
Sep 07 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
模拟OICQ的实现思路和核心程序(三)
2006/10/09 PHP
PHP自动选择 连接本地还是远程数据库
2010/12/02 PHP
第三章 php操作符与控制结构代码
2011/12/30 PHP
浅析PHP页面局部刷新功能的实现小结
2013/06/21 PHP
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
在Nginx上部署ThinkPHP项目教程
2015/02/02 PHP
PHP设置进度条的方法
2015/07/08 PHP
php实现图片上传时添加文字和图片水印技巧
2020/04/18 PHP
php计算给定日期所在周的开始日期和结束日期示例
2017/02/06 PHP
php 算法之实现相对路径的实例
2017/10/17 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
用JS剩余字数计算的代码
2008/07/03 Javascript
用JavaScript实现UrlEncode和UrlDecode的脚本代码
2008/07/23 Javascript
jQuery的学习步骤
2011/02/23 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
2011/09/27 Javascript
jQuery源码分析-01总体架构分析
2011/11/14 Javascript
window.location.href中url中数据量太大时的解决方法
2013/12/23 Javascript
js保留小数点后几位的写法
2014/01/03 Javascript
Vue.js路由组件vue-router使用方法详解
2016/12/02 Javascript
在vue中添加Echarts图表的基本使用教程
2017/11/22 Javascript
Vue动态生成表格的行和列
2019/07/18 Javascript
原生js实现针对Dom节点的CRUD操作示例
2019/08/26 Javascript
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
用python实现批量重命名文件的代码
2012/05/25 Python
Python实现远程调用MetaSploit的方法
2014/08/22 Python
使用Django Form解决表单数据无法动态刷新的两种方法
2017/07/14 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
tensorflow 用矩阵运算替换for循环 用tf.tile而不写for的方法
2018/07/27 Python
Python库安装速度过慢解决方案
2020/07/14 Python
python字典按照value排序方法
2020/12/28 Python
使用HTML5 Canvas API中的clip()方法裁剪区域图像
2016/03/25 HTML / CSS
Bibloo罗马尼亚网站:女装、男装、童装及鞋子和配饰
2019/07/20 全球购物
小学清明节活动方案
2014/03/08 职场文书
出国留学自荐信模板
2015/03/06 职场文书
个人承诺书格式范文
2015/04/29 职场文书
2015年幼儿园班主任个人工作总结
2015/10/22 职场文书