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 相关文章推荐
IE和Firefox下javascript的兼容写法小结
Dec 10 Javascript
比较详细的关于javascript 解析json的代码
Dec 16 Javascript
JavaScript中的setMilliseconds()方法使用详解
Jun 11 Javascript
javascript html5轻松实现拖动功能
Mar 01 Javascript
JS动态添加的div点击跳转到另一页面实现代码
Sep 30 Javascript
vue-awesome-swiper滑块插件使用方法详解
Nov 27 Javascript
基于axios封装fetch方法及调用实例
Feb 05 Javascript
JavaScript类的继承方法小结【组合继承分析】
Jul 11 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
Aug 22 Javascript
vue实现前台列表数据过滤搜索、分页效果
May 28 Javascript
详解Vue template 如何支持多个根结点
Feb 10 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
Jun 07 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程序员基本要求和必备技能
2014/05/09 PHP
基于命令行执行带参数的php脚本并取得参数的方法
2016/01/25 PHP
php处理单文件、多文件上传代码分享
2016/08/24 PHP
jQuery EasyUI API 中文文档 - Parser 解析器
2011/09/29 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
2013/06/28 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
2013/11/13 Javascript
html文本框提示效果的示例代码
2014/06/28 Javascript
Nodejs实现的一个静态服务器实例
2014/12/06 NodeJs
javascript设计模式之单体模式学习笔记
2017/02/15 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
2017/12/22 Javascript
Vue用v-for给src属性赋值的方法
2018/03/03 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
2019/05/01 Javascript
[55:23]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python的lambda匿名函数的简单介绍
2013/04/25 Python
web.py中调用文件夹内模板的方法
2014/08/26 Python
最基础的Python的socket编程入门教程
2015/04/23 Python
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
详解Python map函数及Python map()函数的用法
2017/11/16 Python
深入浅析Python中的yield关键字
2018/01/24 Python
python的staticmethod与classmethod实现实例代码
2018/02/11 Python
tensorflow实现对图片的读取的示例代码
2018/02/12 Python
pycharm在调试python时执行其他语句的方法
2018/11/29 Python
解决Jupyter Notebook开始菜单栏Anaconda下消失的问题
2020/04/13 Python
Python面向对象特殊属性及方法解析
2020/09/16 Python
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
深入解析HTML5使用SVG图像时的viewBox属性用法
2015/09/02 HTML / CSS
WiFi云数码相框:Nixplay
2018/07/05 全球购物
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2012/04/17 面试题
2014庆六一活动方案
2014/03/02 职场文书
期末评语大全
2014/05/04 职场文书
求职信怎么写范文
2014/05/26 职场文书
经费申请报告范文
2015/05/18 职场文书
火烧圆明园观后感
2015/06/03 职场文书
php中配置文件保存修改操作 如config.php文件的读取修改等操作
2021/05/12 PHP
Python绘制散乱的点构成的图的方法
2022/04/21 Python
Redis 异步机制
2022/05/15 Redis