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 相关文章推荐
js showModalDialog参数的使用详解
Jan 07 Javascript
JQuery做的一个简单的点灯游戏分享
Jul 16 Javascript
JS中Location使用详解
May 12 Javascript
Node.js操作mysql数据库增删改查
Mar 30 Javascript
JavaScript中的prototype原型学习指南
May 09 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
Oct 13 Javascript
vue.js中父组件调用子组件的内部方法示例
Oct 22 Javascript
layer插件select选中默认值的方法
Aug 14 Javascript
turn.js异步加载实现翻书效果
Jul 25 Javascript
JS中this的4种绑定规则详解
Feb 04 Javascript
浅谈javascript事件环微任务和宏任务队列原理
Sep 12 Javascript
vue 二维码长按保存和复制内容操作
Sep 22 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
简单的PHP留言本实例代码
2010/05/09 PHP
《PHP编程最快明白》第八讲:php启发和小结
2010/11/01 PHP
PHP对接微信公众平台消息接口开发流程教程
2014/03/25 PHP
简单介绍PHP的责任链编程模式
2015/08/11 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
简单谈谈 php 文件锁
2017/02/19 PHP
php实现JWT验证的实例教程
2020/11/26 PHP
jquery ajax请求实例深入解析
2012/11/26 Javascript
js自定义方法通过隐藏iframe实现文件下载
2013/02/21 Javascript
解析javascript 实用函数的使用详解
2013/05/10 Javascript
Javascript之this关键字深入解析
2013/11/12 Javascript
javascript为下拉列表动态添加数据项
2014/05/23 Javascript
js运动动画的八个知识点
2015/03/12 Javascript
jQuery的基本概念与高级编程
2015/05/14 Javascript
Jquery实现动态切换图片的方法
2015/05/18 Javascript
JavaScript实现上下浮动的窗口效果代码
2015/10/12 Javascript
js date 格式化
2017/02/15 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
2017/10/30 Javascript
vuex入门最详细整理
2020/03/04 Javascript
在Django的通用视图中处理Context的方法
2015/07/21 Python
Python简单遍历字典及删除元素的方法
2016/09/18 Python
python简单实现操作Mysql数据库
2018/01/29 Python
判断python字典中key是否存在的两种方法
2018/08/10 Python
opencv实现静态手势识别 opencv实现剪刀石头布游戏
2019/01/22 Python
Python 调用 Windows API COM 新法
2019/08/22 Python
python装饰器相当于函数的调用方式
2019/12/27 Python
Python栈的实现方法示例【列表、单链表】
2020/02/22 Python
Keras 在fit_generator训练方式中加入图像random_crop操作
2020/07/03 Python
基于Python的身份证验证识别和数据处理详解
2020/11/14 Python
马来西亚综合购物网站:Lazada马来西亚
2018/06/05 全球购物
销售提升方案
2014/06/07 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
员工2014年度工作总结
2014/12/09 职场文书
在pyCharm中下载第三方库的方法
2021/04/18 Python
OpenCV-Python实现人脸磨皮算法
2021/06/07 Python
Java elasticsearch安装以及部署教程
2021/06/28 Java/Android