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原生态函数中使用jQuery中的 $(this)无效的解决方法
May 25 Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
Nov 15 Javascript
javascript读写json示例
Apr 11 Javascript
JS中Location使用详解
May 12 Javascript
详细分析JavaScript函数定义
Jul 16 Javascript
jQuery中的deferred使用方法
Mar 27 jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
关于在mongoose中填充外键的方法详解
Aug 14 Javascript
详解vue为什么要求组件模板只能有一个根元素
Jul 22 Javascript
微信小程序本地存储实现每日签到、连续签到功能
Oct 09 Javascript
JavaScript实现五子棋小游戏
Oct 26 Javascript
使用Vue.js和MJML创建响应式电子邮件
Mar 23 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之sphinx
2013/05/15 PHP
PHP编程之设置apache虚拟目录
2016/07/08 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
php实现 master-worker 守护多进程模式的实例代码
2019/07/20 PHP
win10下 php安装seaslog扩展的详细步骤
2020/12/04 PHP
jquery插件jbox使用iframe关闭问题
2009/02/09 Javascript
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
通过DOM脚本去设置样式信息
2010/09/19 Javascript
最短的javascript:地址栏载入脚本代码
2011/10/13 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
2013/09/02 Javascript
JS获取select的value和text值的简单实例
2014/02/26 Javascript
JS实现为表格动态添加标题的方法
2015/03/31 Javascript
纯js实现手风琴效果
2020/04/17 Javascript
JS原型对象的创建方法详解
2016/06/16 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
2018/03/20 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
2019/08/29 Javascript
微信小程序商品详情页底部弹出框
2019/11/22 Javascript
js实现鼠标拖拽div左右滑动
2020/01/15 Javascript
mpvue实现微信小程序快递单号查询代码
2020/04/03 Javascript
Nodejs实现WebSocket代码实例
2020/05/19 NodeJs
使用Python抓取模板之家的CSS模板
2015/03/16 Python
python中enumerate函数用法实例分析
2015/05/20 Python
python 获取网页编码方式实现代码
2017/03/11 Python
基于并发服务器几种实现方法(总结)
2017/12/29 Python
Python制作词云的方法
2018/01/03 Python
简单实现python画圆功能
2018/01/25 Python
对pyqt5中QTabWidget的相关操作详解
2019/06/21 Python
使用pth文件添加Python环境变量方式
2020/05/26 Python
Django搭建项目实战与避坑细节详解
2020/12/06 Python
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
世界上最伟大的马产品:Equiderma
2020/01/07 全球购物
2014迎国庆标语大全
2014/09/19 职场文书
班子群众路线教育实践个人对照检查材料思想汇报
2014/09/30 职场文书
办公经费申请报告
2015/05/15 职场文书
教师考核鉴定意见
2015/06/05 职场文书
学校趣味运动会开幕词
2016/03/04 职场文书