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 相关文章推荐
High Performance JavaScript(高性能JavaScript)读书笔记分析
May 05 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
Aug 13 Javascript
jquery 添加节点的几种方法介绍
Sep 04 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
Mar 08 Javascript
jQuery实现跟随鼠标运动图层效果的方法
Feb 02 Javascript
高效的jquery数字滚动特效
Dec 17 Javascript
js判断图片加载完成后获取图片实际宽高的方法
Feb 25 Javascript
纯js代码制作的网页时钟特效【附实例】
Mar 30 Javascript
AngularJS 执行流程详细介绍
Aug 18 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
Jul 28 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
Oct 08 Javascript
监听element-ui table滚动事件的方法
Mar 26 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
TP5框架实现签到功能的方法分析
2020/04/05 PHP
js中更短的 Array 类型转换
2011/10/30 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
2013/02/01 Javascript
深入理解JavaScript 闭包究竟是什么
2013/04/12 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
2015/05/06 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
2015/06/19 Javascript
jQuery实现类似淘宝网图片放大效果的方法
2015/07/08 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
2015/10/29 Javascript
JavaScript File API文件上传预览
2016/02/02 Javascript
BootStrap和jQuery相结合实现可编辑表格
2016/04/21 Javascript
seajs学习教程之基础篇
2016/10/20 Javascript
nodejs利用http模块实现银行卡所属银行查询和骚扰电话验证示例
2016/12/30 NodeJs
微信小程序  checkbox组件详解及简单实例
2017/01/10 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
2017/07/18 Javascript
浅谈Vue 初始化性能优化
2017/08/31 Javascript
vue2.0 和 animate.css的结合使用
2017/12/12 Javascript
vue指令v-html使用过滤器filters功能实例
2019/10/25 Javascript
vue-socket.io跨域问题有效解决方法
2020/02/11 Javascript
OpenLayers3实现测量功能
2020/09/25 Javascript
python搭建微信公众平台
2016/02/09 Python
Python实现将MySQL数据库表中的数据导出生成csv格式文件的方法
2018/01/11 Python
分享一下Python数据分析常用的8款工具
2018/04/29 Python
python通过zabbix api获取主机
2018/09/17 Python
通过PYTHON来实现图像分割详解
2019/06/26 Python
python实现扑克牌交互式界面发牌程序
2020/04/22 Python
浅谈Python 函数式编程
2020/06/20 Python
python全栈开发语法总结
2020/11/22 Python
python利用appium实现手机APP自动化的示例
2021/01/26 Python
html5中 media(播放器)的api使用指南
2014/12/26 HTML / CSS
历史专业毕业生的自我鉴定
2013/11/15 职场文书
《理想》教学反思
2014/02/17 职场文书
乡镇消防工作实施方案
2014/03/27 职场文书
学雷锋先进个人事迹
2014/05/26 职场文书
七个Python必备的GUI库
2021/04/27 Python
如何使用Python提取Chrome浏览器保存的密码
2021/06/09 Python