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/jquery对上传文件格式过滤的方法
Jul 25 Javascript
Javascript 中的类和闭包
Jan 08 Javascript
JS俄罗斯方块,包含完整的设计理念
Dec 11 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
Feb 05 Javascript
js图片延迟加载的实现方法及思路
Jul 22 Javascript
jquery实现人性化的有选择性禁用鼠标右键
Jun 30 Javascript
纯javascript实现简单下拉刷新功能
Mar 13 Javascript
Javascript实现图片懒加载插件的方法
Oct 20 Javascript
关于Iframe父页面与子页面之间的相互调用
Nov 22 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
Vue 实现双向绑定的四种方法
Mar 16 Javascript
原生JS实现轮播图效果
Oct 12 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 日常开发小技巧
2009/09/23 PHP
PHP提示Cannot modify header information - headers already sent by解决方法
2014/09/22 PHP
PHP读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
JavaScript 组件之旅(二)编码实现和算法
2009/10/28 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
vue.js学习笔记之绑定style样式和class列表
2016/10/31 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
2017/01/04 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
2017/01/14 Javascript
Bootstrap笔记—折叠实例代码
2017/03/13 Javascript
react-router JS 控制路由跳转实例
2017/06/15 Javascript
微信小程序实现的canvas合成图片功能示例
2019/05/03 Javascript
微信小程序开发技巧汇总
2019/07/15 Javascript
Vue+Node实现的商城用户管理功能示例
2019/12/23 Javascript
Vue页面刷新记住页面状态的实现
2019/12/27 Javascript
[58:12]Ti4第二日主赛事败者组 LGD vs iG 3
2014/07/21 DOTA
python批量读取txt文件为DataFrame的方法
2018/04/03 Python
Django中使用第三方登录的示例代码
2018/08/20 Python
Python干货:分享Python绘制六种可视化图表
2018/08/27 Python
Python+appium框架原生代码实现App自动化测试详解
2020/03/06 Python
如何在mac下配置python虚拟环境
2020/07/06 Python
python,Java,JavaScript实现indexOf
2020/09/09 Python
python实现xml转json文件的示例代码
2020/12/30 Python
即时搜索数百万张门票:SeatsForEveryone.com
2018/08/26 全球购物
Travelstart沙特阿拉伯:廉价航班、豪华酒店和实惠的汽车租赁优惠
2019/04/06 全球购物
Farfetch台湾官网:奢侈品牌时尚购物平台
2019/06/17 全球购物
领先的荷兰线上超市:荷兰之家Holland at Home(支持中文)
2021/01/21 全球购物
实习自我鉴定
2013/12/15 职场文书
安全生产网格化管理实施方案
2014/03/01 职场文书
2014爱耳日宣传教育活动总结
2014/03/09 职场文书
《狼和小羊》教学反思
2014/04/20 职场文书
政治学求职信
2014/06/03 职场文书
2016母亲节感恩话语
2015/12/09 职场文书
Ajax 的初步实现(使用vscode+node.js+express框架)
2021/06/18 Javascript
Netty客户端接入流程NioSocketChannel创建解析
2022/03/25 Java/Android
Redis中key的过期删除策略和内存淘汰机制
2022/04/12 Redis
centos7安装mysql5.7经验记录
2022/05/02 Servers