调用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 相关文章推荐
兼容Mozilla必须知道的知识。
Jan 09 Javascript
在多个页面使用同一个HTML片段《续》
Mar 04 Javascript
通过上下左右键和回车键切换光标实现代码
Mar 08 Javascript
ajax提交表单实现网页无刷新注册示例
May 08 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
Aug 26 Javascript
JS实现的仿QQ空间图片弹出效果代码
Feb 23 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
Aug 05 Javascript
详解angularjs结合pagination插件实现分页功能
Feb 10 Javascript
总结js函数相关知识点
Feb 27 Javascript
解决vue-cli3 使用子目录部署问题
Jul 19 Javascript
vue2.0父子组件间传递数据的方法
Aug 16 Javascript
浅谈小程序 setData学问多
Feb 20 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处理Oracle的CLOB实例
2014/11/03 PHP
分享php代码将360浏览器导出的favdb的sqlite数据库文件转换为html
2015/12/09 PHP
使用XHProf查找PHP性能瓶颈的实例
2017/12/13 PHP
[原创]站长必须要知道的javascript广告代码
2007/05/30 Javascript
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
2012/01/08 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
2013/06/05 Javascript
jquery插件pagination实现无刷新ajax分页
2015/09/30 Javascript
jQuery实现定位滚动条位置
2016/08/05 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
2016/09/05 Javascript
微信小程序 登录实例详解
2017/01/16 Javascript
jQuery元素选择器实例代码
2017/02/06 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
2017/12/27 Javascript
Vue中android4.4不兼容问题的解决方法
2018/09/04 Javascript
Python编程中的反模式实例分析
2014/12/08 Python
Python实现telnet服务器的方法
2015/07/10 Python
windows上安装Anaconda和python的教程详解
2017/03/28 Python
python数据抓取分析的示例代码(python + mongodb)
2017/12/25 Python
python实现图片文件批量重命名
2020/03/23 Python
Python学习小技巧总结
2018/06/10 Python
Pycharm 实现下一个文件引用另外一个文件的方法
2019/01/17 Python
djang常用查询SQL语句的使用代码
2019/02/15 Python
Django中多种重定向方法使用详解
2019/07/17 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
使用HTML5 IndexDB存储图像和文件的示例
2018/11/05 HTML / CSS
AmazeUI 点击元素显示全屏的实现
2020/08/25 HTML / CSS
德国网上宠物店:Zoobio
2018/05/23 全球购物
室内设计专业个人的自我评价
2013/10/19 职场文书
初中数学教学反思
2014/01/16 职场文书
我的动漫时代的创业计划书范文
2014/01/27 职场文书
个人作风剖析材料
2014/02/02 职场文书
二年级语文教学反思
2014/02/02 职场文书
人事文员岗位职责
2014/02/16 职场文书
综治维稳工作承诺书
2014/08/30 职场文书
幼儿园大班教师个人工作总结
2015/02/05 职场文书
会计简历自我评价
2015/03/10 职场文书
企业工会工作总结2015
2015/05/13 职场文书