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 相关文章推荐
javascript 对表格的行和列都能加亮显示
Dec 26 Javascript
JavaScript中神奇的call()方法
Mar 12 Javascript
AngularJS手动表单验证
Feb 01 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
Aug 19 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
Sep 10 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
Mar 01 Javascript
vue项目中应用ueditor自定义上传按钮功能
Apr 27 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
Aug 17 Javascript
vue监听用户输入和点击功能
Sep 27 Javascript
react组件基本用法示例小结
Apr 27 Javascript
javascript实现打砖块小游戏(附完整源码)
Sep 18 Javascript
微信小程序抽奖组件的使用步骤
Jan 11 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
Get或Post提交值的非法数据处理
2006/10/09 PHP
php下过滤html代码的函数 提高程序安全性
2010/03/02 PHP
php根据年月获取季度的方法
2014/03/31 PHP
php中 $$str 中 &quot;$$&quot; 的详解
2015/07/06 PHP
php+jQuery递归调用POST循环请求示例
2016/10/14 PHP
Laravel实现短信注册的示例代码
2018/05/29 PHP
PDO::exec讲解
2019/01/28 PHP
jquery 批量上传图片实现代码
2010/01/28 Javascript
js导入导出excel(实例代码)
2013/11/25 Javascript
JQuery中的事件及动画用法实例
2015/01/26 Javascript
全面解析Javascript无限添加QQ好友原理
2016/06/15 Javascript
AngularJS中过滤器的使用与自定义实例代码
2016/09/17 Javascript
xmlplus组件设计系列之列表(4)
2017/04/26 Javascript
JQuery Ajax 异步操作之动态添加节点功能
2017/05/24 jQuery
基于JavaScript实现百度搜索框效果
2020/06/28 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
vue实现登陆登出的实现示例
2017/09/15 Javascript
微信小程序实现上拉加载功能
2019/11/20 Javascript
Vue自定义多选组件使用详解
2020/09/08 Javascript
python中__slots__用法实例
2015/06/04 Python
使用Python来开发Markdown脚本扩展的实例分享
2016/03/04 Python
利用 Monkey 命令操作屏幕快速滑动
2016/12/07 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
解决jupyter notebook import error但是命令提示符import正常的问题
2020/04/15 Python
Pyinstaller 打包发布经验总结
2020/06/02 Python
OpenCV灰度化之后图片为绿色的解决
2020/12/01 Python
互联网创业计划书写作技巧攻略
2014/03/23 职场文书
给妈妈洗脚活动方案
2014/08/16 职场文书
对照四风自我剖析材料
2014/10/07 职场文书
房产协议书范本
2014/10/18 职场文书
2014年工作总结与下年工作计划
2014/11/27 职场文书
廉政承诺书
2015/01/19 职场文书
2015年重阳节活动总结
2015/03/24 职场文书
投标售后服务承诺书
2015/04/29 职场文书
思品教学工作总结
2015/08/10 职场文书
超外差式晶体管收音机的组装与统调
2021/04/22 无线电