调用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 相关文章推荐
from 表单提交返回值用post或者是get方法实现
Aug 21 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
Feb 07 Javascript
js重写alert控件(适合学习js的新手朋友)
Aug 24 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
Jul 27 Javascript
text-align:justify实现文本两端对齐 兼容IE
Aug 19 Javascript
深入理解setTimeout函数和setInterval函数
May 20 Javascript
js省市区级联查询(插件版&amp;无插件版)
Mar 21 Javascript
js 毫秒转天时分秒的实例
Nov 17 Javascript
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
VueJs里利用CryptoJs实现加密及解密的方法示例
Apr 29 Javascript
vue实现计步器功能
Nov 01 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
Dec 06 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下实现农历日历的代码
2007/03/07 PHP
php入门学习知识点七 PHP函数的基本应用
2011/07/14 PHP
php header功能的使用
2013/10/28 PHP
PHP 范围解析操作符(::)用法分析【访问静态成员和类常量】
2020/04/14 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2006/11/24 Javascript
js+数组实现网页上显示时间/星期几的实用方法
2013/01/18 Javascript
JavaScript实现多维数组的方法
2013/11/20 Javascript
JavaScript 学习笔记之基础中的基础
2015/01/13 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
2015/09/19 Javascript
JavaScript构造函数详解
2015/12/27 Javascript
第一次接触神奇的前端框架vue.js
2016/12/01 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
2017/05/07 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
2017/06/13 Javascript
JS奇技之利用scroll来监听resize详解
2017/06/15 Javascript
vux uploader 图片上传组件的安装使用方法
2018/05/15 Javascript
vue中倒计时组件的实例代码
2018/07/06 Javascript
轻松实现python搭建微信公众平台
2016/02/16 Python
Python实现的网页截图功能【PyQt4与selenium组件】
2018/07/12 Python
python儿童学游戏编程知识点总结
2019/06/03 Python
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
如何通过Django使用本地css/js文件
2020/01/20 Python
PyCharm中如何直接使用Anaconda已安装的库
2020/05/28 Python
Python如何在main中调用函数内的函数方式
2020/06/01 Python
HTML5实现桌面通知 提示功能
2017/10/11 HTML / CSS
美国波西米亚风格服装品牌:Show Me Your Mumu
2018/01/05 全球购物
造型师求职自荐信
2013/09/27 职场文书
毕业生自荐书
2013/12/18 职场文书
厨师长岗位职责
2014/03/02 职场文书
遗体告别仪式主持词
2014/03/20 职场文书
中职三好学生事迹材料
2014/08/24 职场文书
软件测试专业推荐信
2014/09/18 职场文书
小学感恩节活动策划方案
2014/10/06 职场文书
学校党支部承诺书
2015/04/30 职场文书
三十年同学聚会感言
2015/07/30 职场文书
redis内存空间效率问题的深入探究
2021/05/17 Redis
使用nginx配置访问wgcloud的方法
2021/06/26 Servers