jquery移除button的inline onclick事件(已测试及兼容浏览器)


Posted in Javascript onJanuary 25, 2013

inline onclick代码如下

<input type="button" id="btnOK" name="" value="确定" onclick="btnOKClick();" />

btnOKClick的代码
function btnOKClick() { 
alert("btnOK Clicked"); 
}

现在要在点击按钮以后,移除onclick事件,并为按钮绑定一个新的click事件。在第二次点击时候,就开始执行第二个事件处理函数,第二个处理函数的代码:
reclick的代码
function reclick() { 
alert('reclick'); 
} 
[\s\S ]*\n

思路:在btnOKClick中移除onclick,然后添加新的绑定,代码如下:
$('#btnOK').attr('onclick', '').bind('click', function () { reclick(); });

加上这段代码后的btnOKClick方法如下:
function btnOKClick() { 
alert("btnOK Clicked"); 
$('#btnOK').attr('onclick', '').bind('click', function () { reclick(); }); 
}

这种方法在Google Chrome下正常工作,但是在IE的兼容模式下会马上调用reclick方法,这不是我们想要的效果。

出现这种效果的原因貌似是因为onclick执行完了以后,IE回去查看是否有绑定在click上的handler,结构是有的,于是就马上执行了。

为了解决这个问题,我们可以换个思路,就是延迟绑定click事件。具体的代码如下:

function btnOKClick() { 
alert("btnOK Clicked"); 
setTimeout(function () { 
$('#btnOK').attr('onclick', '').bind('click', function () { reclick(); }); 
}, 1); 
}

这里使用了setTimeout定时器,在定时器触发以后,才执行移除onclick属性,绑定click handler的代码。
经测试,在IE9的兼容模式和非兼容模式下都可以正常运行;Google Chrome也正常运行。
Javascript 相关文章推荐
YUI 读码日记之 YAHOO.util.Dom - Part.1
Mar 22 Javascript
js获取图片长和宽度的代码
Nov 24 Javascript
jQuery库与其他JS库冲突的解决办法
Feb 07 Javascript
c#和Javascript操作同一json对象的实现代码
Jan 17 Javascript
JS中的数组的sort方法使用示例
Jan 22 Javascript
关于onchange事件在IE和FF下的表现及解决方法
Mar 08 Javascript
JavaScript实现存储HTML字符串示例
Apr 21 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
Aug 02 Javascript
WebSocket的通信过程与实现方法详解
Apr 29 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 Javascript
微信小程序自定义导航教程(兼容各种手机)
Dec 12 Javascript
mpvue性能优化实战技巧(小结)
Apr 17 Javascript
javascript表单验证 - Parsley.js使用和配置
Jan 25 #Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
Jan 25 #Javascript
使用JavaScript动态设置样式实现代码(2)
Jan 25 #Javascript
使用JavaScript动态设置样式实现代码及演示动画
Jan 25 #Javascript
jQuery获取Select选择的Text和Value(详细汇总)
Jan 25 #Javascript
javascript面向对象包装类Class封装类库剖析
Jan 24 #Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
Jan 24 #Javascript
You might like
使用 eAccelerator加速PHP代码的方法
2007/09/30 PHP
PHP导出MySQL数据到Excel文件(fputcsv)
2011/07/03 PHP
Session保存到数据库的php类分享
2011/10/24 PHP
深入解析yii权限分级式访问控制的实现(非RBAC法)
2013/06/13 PHP
简单实用的.net DataTable导出Execl
2013/10/28 PHP
PHP实现压缩图片尺寸并转为jpg格式的方法示例
2018/05/10 PHP
Nodejs全栈框架StrongLoop推荐
2014/11/09 NodeJs
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
2016/12/22 Javascript
js实现复选框的全选和取消全选效果
2017/01/03 Javascript
jquery PrintArea 实现票据的套打功能(代码)
2017/03/17 Javascript
js获取当前周、上一周、下一周日期
2017/03/19 Javascript
jquery.uploadView 实现图片预览上传功能
2017/08/10 jQuery
js截取字符串功能的实现方法
2017/09/27 Javascript
Angular 4中如何显示内容的CSS样式示例代码
2017/11/06 Javascript
微信小程序模板(template)使用详解
2018/01/31 Javascript
js+html5实现手机九宫格密码解锁功能
2018/07/30 Javascript
浅谈webpack devtool里的7种SourceMap模式
2019/01/14 Javascript
vue.js循环radio的实例
2019/11/07 Javascript
原生JS实现留言板
2020/03/26 Javascript
[01:10:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第一场 3月4日
2021/03/11 DOTA
python修改list中所有元素类型的三种方法
2018/04/09 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
Python队列RabbitMQ 使用方法实例记录
2019/08/05 Python
Python多线程threading join和守护线程setDeamon原理详解
2020/03/18 Python
一套C++笔试题面试题
2012/06/06 面试题
大门门卫岗位职责
2013/11/30 职场文书
旅游管理专业个人求职信范文
2013/12/24 职场文书
宿舍使用违章电器检讨书
2014/01/12 职场文书
大学生学年自我鉴定
2014/02/10 职场文书
党的群众路线教育实践活动学习心得体会
2014/03/03 职场文书
党的群众路线教育实践活动个人对照检查材料(医生)
2014/11/05 职场文书
学校远程教育工作总结
2015/08/11 职场文书
mysql 8.0.24版本安装配置方法图文教程
2021/05/12 MySQL
Python 内置函数速查表一览
2021/06/02 Python
sql注入教程之类型以及提交注入
2021/08/02 MySQL
Redis中缓存穿透/击穿/雪崩问题和解决方法
2021/12/04 Redis