调用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 相关文章推荐
用正则表达式 动态创建/增加css style script 兼容IE firefox
Mar 10 Javascript
js动态添加删除,后台取数据(示例代码)
Nov 25 Javascript
使用jQuery时Form表单元素ID和name命名大忌
Mar 06 Javascript
js/jquery判断浏览器的方法小结
Sep 02 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
Apr 13 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
Jul 24 Javascript
详解JavaScript按概率随机生成事件
Aug 02 Javascript
微信小程序中吸底按钮适配iPhone X方案
Nov 29 Javascript
关于react中组件通信的几种方式详解
Dec 10 Javascript
最后说说Vue2 SSR 的 Cookies 问题
May 25 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
Jun 19 Javascript
Vue项目实现简单的权限控制管理功能
Jul 17 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中strtotime函数使用方法分享
2012/01/10 PHP
php获取用户IPv4或IPv6地址的代码
2012/11/15 PHP
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
PHP中绘制图像的一些函数总结
2014/11/19 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
基于PHP的微信公众号的开发流程详解
2020/08/07 PHP
javascript面向对象编程(一) 实例代码
2010/06/25 Javascript
JS实现字体选色板实例代码
2013/11/20 Javascript
jQuery对象与DOM对象之间的相互转换
2015/03/03 Javascript
jquery处理页面弹出层查询数据等待操作实例
2015/03/25 Javascript
详解JavaScript编程中的数组结构
2015/10/24 Javascript
JS调用打印机功能简单示例
2016/11/28 Javascript
prototype与__proto__区别详细介绍
2017/01/09 Javascript
JavaScript原生节点操作小结
2017/01/17 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
2017/03/15 Javascript
Bootstrap警告框(Alert)插件使用方法
2017/03/21 Javascript
vue组件Prop传递数据的实现示例
2017/08/17 Javascript
vue实现商城上货组件简易版
2017/11/27 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
2017/12/06 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
2018/05/03 Javascript
基于nodejs的雪碧图制作工具的示例代码
2018/11/05 NodeJs
基于vue实现圆形菜单栏组件
2019/07/05 Javascript
webpack 如何解析代码模块路径的实现
2019/09/04 Javascript
使用 Element UI Table 的 slot-scope方法
2019/10/10 Javascript
python编程测试电脑开启最大线程数实例代码
2018/02/09 Python
python pandas修改列属性的方法详解
2018/06/09 Python
Django REST framework内置路由用法
2019/07/26 Python
使用Python发现隐藏的wifi
2020/03/04 Python
在jupyter notebook 添加 conda 环境的操作详解
2020/04/10 Python
使用before和:after伪类制作css3圆形按钮
2014/04/08 HTML / CSS
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
2016/12/16 HTML / CSS
大学生就业自我鉴定
2013/10/26 职场文书
党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2014年妇联工作总结
2014/11/21 职场文书
2014年银行信贷员工作总结
2014/12/08 职场文书
MySQL中TIMESTAMP类型返回日期时间数据中带有T的解决
2022/12/24 MySQL