调用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 相关文章推荐
IE不支持getElementsByClassName最终完美解决方案
Dec 17 Javascript
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
Apr 15 Javascript
javascript实现移动端上的触屏拖拽功能
Mar 04 Javascript
jQuery通用的全局遍历方法$.each()用法实例
Jul 04 Javascript
jQuery.uploadify文件上传组件实例讲解
Sep 23 Javascript
过期软件破解办法实例详解
Jan 04 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
Sep 22 Javascript
javascript获取元素的计算样式
May 24 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
Sep 27 Javascript
Vue实现浏览器打印功能的代码
Apr 17 Javascript
vue element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
原生JS运动实现轮播图
Jan 02 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数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
php结合ajax实现赞、顶、踩功能实例
2014/05/12 PHP
php浏览历史记录的方法
2015/03/10 PHP
typecho插件编写教程(六):调用接口
2015/05/28 PHP
php实现的日历程序
2015/06/18 PHP
PHP 500报错的快速解决方法
2016/12/14 PHP
PHP解耦的三重境界(浅谈服务容器)
2017/03/13 PHP
php7 参数、整形及字符串处理机制修改实例分析
2020/05/25 PHP
jquery map方法使用示例
2014/04/23 Javascript
JavaScript实现横向滑出的多级菜单效果
2015/10/09 Javascript
关于js原型的面试题讲解
2016/09/25 Javascript
Javascript中作用域的详细介绍
2016/10/06 Javascript
Vue自定义指令详解
2017/07/28 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
2017/08/29 jQuery
Vue 滚动行为的具体使用方法
2017/09/13 Javascript
微信小程序 按钮滑动的实现方法
2017/09/27 Javascript
nodejs多版本管理总结
2018/04/03 NodeJs
vue2实现搜索结果中的搜索关键字高亮的代码
2018/08/29 Javascript
理解JavaScript中的对象
2020/08/25 Javascript
[00:14]护身甲盾
2019/03/06 DOTA
Python  __getattr__与__setattr__使用方法
2008/09/06 Python
Python中os.path用法分析
2015/01/15 Python
树莓派与PC端在局域网内运用python实现即时通讯
2019/06/22 Python
tensorflow实现读取模型中保存的值 tf.train.NewCheckpointReader
2020/02/10 Python
python 解决函数返回return的问题
2020/12/05 Python
浅析python连接数据库的重要事项
2021/02/22 Python
爱淘宝:淘宝网购物分享平台
2017/04/28 全球购物
Square Off美国/加拿大:世界上最聪明的国际象棋棋盘
2018/12/06 全球购物
.net开发工程师面试题
2014/02/25 面试题
借款协议书范本
2014/04/22 职场文书
奥林匹克的口号
2014/06/13 职场文书
幼儿园欢迎词范文
2015/01/26 职场文书
2015年百日安全活动总结
2015/03/26 职场文书
2015年助理工程师工作总结
2015/04/03 职场文书
2015年仓库管理工作总结
2015/05/25 职场文书
穷人该怎么创业?谨记以下几点
2019/07/11 职场文书