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 相关文章推荐
jquery获取URL中参数解决中文乱码问题的两种方法
Dec 18 Javascript
jquery序列化表单以及回调函数的使用示例
Jul 02 Javascript
JS中字符串trim()使用示例
May 26 Javascript
浅谈JSON.parse()和JSON.stringify()
Jul 14 Javascript
深入浅析JavaScript中对事件的三种监听方式
Sep 29 Javascript
Bootstrap前端开发案例一
Jun 17 Javascript
第九篇Bootstrap导航菜单创建步骤详解
Jun 21 Javascript
Jquery删除css属性的简单方法
Dec 04 Javascript
基于jquery实现多选下拉列表
Aug 02 jQuery
webpack之devtool详解
Feb 10 Javascript
webpack 3.X学习之多页面打包的方法
Sep 04 Javascript
js仿京东放大镜效果
Aug 09 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
基于mysql的bbs设计(一)
2006/10/09 PHP
PHP中ADODB类详解
2008/03/25 PHP
PHP set_error_handler()函数使用详解(示例)
2013/11/12 PHP
百度站点地图(百度sitemap)生成方法分享
2014/01/09 PHP
PHP面试题之文件目录操作
2015/10/15 PHP
学习js所必须要知道的一些
2007/03/07 Javascript
javascript 同时在IE和FireFox获取KeyCode的代码
2010/02/07 Javascript
javascript使用eval或者new Function进行语法检查
2010/10/16 Javascript
使用javascript获取flash加载的百分比的实现代码
2011/05/25 Javascript
基于jQuery替换table中的内容并显示进度条的代码
2011/08/02 Javascript
基于javascript实现判断移动终端浏览器版本信息
2014/12/09 Javascript
jQuery获取标签文本内容和html内容的方法
2015/03/27 Javascript
JavaScript实现网站访问次数统计代码
2015/08/12 Javascript
js老生常谈之this,constructor ,prototype全面解析
2016/04/05 Javascript
js实现加载更多功能实例
2016/10/27 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
2017/07/05 jQuery
详解jquery插件jquery.viewport.js学习使用方法
2017/09/08 jQuery
微信小程序实现image组件图片自适应宽度比例显示的方法
2018/01/16 Javascript
详解angular2.x创建项目入门指令
2018/10/11 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
2019/03/28 Javascript
机器学习之KNN算法原理及Python实现方法详解
2018/07/09 Python
Python Flask前后端Ajax交互的方法示例
2018/07/31 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
Selenium webdriver添加cookie实现过程详解
2020/08/12 Python
详解Python中的编码问题(encoding与decode、str与bytes)
2020/09/30 Python
John Varvatos官方网站:设计师男士时装
2017/02/08 全球购物
ONLY瑞典官网:世界知名服装品牌
2018/06/19 全球购物
Surfdome西班牙:世界上最受欢迎的生活方式品牌
2019/02/13 全球购物
食堂个人先进事迹
2014/01/22 职场文书
感恩老师演讲稿400字
2014/08/28 职场文书
2014年班务工作总结
2014/12/02 职场文书
小学六一主持词开场白
2015/05/28 职场文书
社区干部培训心得体会
2016/01/06 职场文书
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis
Win11如何修改dns?Win11修改dns图文教程
2022/01/18 数码科技