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 Array.sort() 跨浏览器下需要考虑的问题
Dec 07 Javascript
jQuery 事件的命名空间简单了解
Nov 22 Javascript
Javascript中arguments用法实例分析
Jun 13 Javascript
node.js中module.exports与exports用法上的区别
Sep 02 Javascript
jQuery EasyUi 验证功能实例解析
Jan 06 Javascript
微信小程序 swiper组件构建轮播图的实例
Sep 20 Javascript
利用CDN加速react webpack打包后的文件详解
Feb 22 Javascript
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
原生JS实现的碰撞检测功能示例
May 18 Javascript
详解原生JS动态添加和删除类
Mar 26 Javascript
一些可能会用到的Node.js面试题
Jun 15 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
Dec 17 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
getimagesize获取图片尺寸实例
2014/11/15 PHP
在win系统安装配置 Memcached for PHP 5.3 图文教程
2015/03/03 PHP
Zend Framework教程之Loader以及PluginLoader用法详解
2016/03/09 PHP
header与缓冲区之间的深层次分析
2016/07/30 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
PHP基于递归实现的约瑟夫环算法示例
2017/08/27 PHP
使用PHPUnit进行单元测试并生成代码覆盖率报告的方法
2019/03/08 PHP
js类中的公有变量和私有变量
2008/07/24 Javascript
WordPress 照片lightbox效果的运用几点
2009/06/22 Javascript
JQuery1.6 使用方法三
2011/11/23 Javascript
仿新浪微博返回顶部的jquery实现代码
2012/10/01 Javascript
js动态生成指定行数的表格
2013/07/11 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
2013/10/14 Javascript
jQuery基础语法实例入门
2014/12/23 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
2015/01/06 Javascript
js实现右下角提示框的方法
2015/02/03 Javascript
js光标定位文本框回车表单提交问题的解决方法
2015/05/11 Javascript
webpack4 CSS Tree Shaking的使用
2018/09/03 Javascript
原生js代码能实现call和bind吗
2019/07/31 Javascript
webpack DllPlugin xxx is not defined解决办法
2019/12/13 Javascript
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
python中Pycharm 输出中文或打印中文乱码现象的解决办法
2017/06/16 Python
利用Python-iGraph如何绘制贴吧/微博的好友关系图详解
2017/11/02 Python
Python编程使用tkinter模块实现计算器软件完整代码示例
2017/11/29 Python
Python爬虫常用库的安装及其环境配置
2018/09/19 Python
python实现canny边缘检测
2020/09/14 Python
俄罗斯鲜花递送:AMF
2020/04/24 全球购物
应届医学毕业生求职信分享
2013/12/02 职场文书
中英文求职信范文
2014/01/27 职场文书
大学生求职工作的自我评价
2014/02/13 职场文书
大学生作弊检讨书
2014/09/11 职场文书
安全检查汇报材料
2014/12/26 职场文书
有趣的二维码:使用MyQR和qrcode来制作二维码
2021/05/10 Python
十大最强火系宝可梦,喷火龙上榜,第一名有双火属性
2022/03/18 日漫
Go web入门Go pongo2模板引擎
2022/05/20 Golang
Oracle删除归档日志及添加定时任务
2022/06/28 Oracle