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 函数使用说明
Apr 07 Javascript
JSON.parse()和JSON.stringify()使用介绍
Jun 20 Javascript
js实现鼠标悬浮给图片加边框的方法
Jan 30 Javascript
轻松实现javascript图片轮播特效
Jan 13 Javascript
简单封装js的dom查询实例代码
Jul 08 Javascript
AngularJS中的表单简单入门
Jul 28 Javascript
jQuery+ajax读取并解析XML文件的方法
Sep 09 Javascript
原生js代码实现图片放大境效果
Oct 30 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
Mar 04 Javascript
backbone简介_动力节点Java学院整理
Jul 14 Javascript
基于Vue中点击组件外关闭组件的实现方法
Mar 06 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
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
简单的用PHP编写的导航条程序
2006/10/09 PHP
php $_ENV为空的原因分析
2009/06/01 PHP
PHP 字符串分割和比较
2009/10/06 PHP
php visitFile()遍历指定文件夹函数
2010/08/21 PHP
详解PHP实现异步调用的4种方法
2016/03/14 PHP
解决PHP Opcache 缓存刷新、代码重载出现无法更新代码的问题
2020/08/24 PHP
javascript中的有名函数和无名函数
2007/10/17 Javascript
js获取图片大小的函数代码
2011/09/20 Javascript
如何使用json在前后台进行数据传输实例介绍
2013/04/11 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
2015/02/03 Javascript
Jquery使用css方法改变样式实例
2015/05/18 Javascript
jquery判断当前浏览器的实现代码
2015/11/07 Javascript
jQuery获取同级元素的简单代码
2016/07/09 Javascript
Vue.js实现拖放效果的实例
2016/09/30 Javascript
js 性能优化之快速响应的用户界面
2017/02/15 Javascript
js清除浏览器缓存的几种方法
2017/03/15 Javascript
ionic实现底部分享功能
2017/05/11 Javascript
微信小程序按钮去除边框线分享页面功能
2018/08/27 Javascript
Vue切换Tab动态渲染组件的操作
2020/09/21 Javascript
web.py在模板中输出美元符号的方法
2014/08/26 Python
python中pycurl库的用法实例
2014/09/30 Python
python入门基础之用户输入与模块初认识
2016/11/14 Python
python技能之数据导出excel的实例代码
2017/08/11 Python
对pytorch网络层结构的数组化详解
2018/12/08 Python
python 数据提取及拆分的实现代码
2019/08/26 Python
python同步两个文件夹下的内容
2019/08/29 Python
基于Python fminunc 的替代方法
2020/02/29 Python
Pytorch转keras的有效方法,以FlowNet为例讲解
2020/05/26 Python
python实现批处理文件
2020/07/28 Python
Python中生成ndarray实例讲解
2021/02/22 Python
h5页面背景图很长要有滚动条滑动效果的实现
2021/01/27 HTML / CSS
Helly Hansen工作服美国官方网上商店:为最恶劣的环境
2019/09/04 全球购物
电子商务专业学生的自我鉴定
2013/11/28 职场文书
鸿星尔克广告词
2014/03/21 职场文书
大专学生求职自荐信
2014/07/06 职场文书
大学生违纪检讨书范文
2015/05/07 职场文书