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 相关文章推荐
用ASP将SQL搜索出来的内容导出为TXT的代码
Jul 27 Javascript
javascript 面向对象,实现namespace,class,继承,重载
Oct 29 Javascript
For循环中分号隔开的3部分的执行顺序探讨
May 27 Javascript
JQuery解析XML数据的几个简单实例
May 18 Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 Javascript
使用vue.js实现联动效果的示例代码
Jan 10 Javascript
浅谈React和Redux的连接react-redux
Dec 04 Javascript
解决angularJS中input标签的ng-change事件无效问题
Sep 13 Javascript
vue路由教程之静态路由
Sep 03 Javascript
在vue中根据光标的显示与消失实现下拉列表
Sep 29 Javascript
vue cli3适配所有端方案的实现
Apr 13 Javascript
JS的时间格式化和时间戳转换函数示例详解
Jul 27 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原理之Session Gc的一个小概率Notice
2011/04/12 PHP
php读取EXCEL文件 php excelreader读取excel文件
2012/12/06 PHP
PHP框架Swoole定时器Timer特性分析
2014/08/19 PHP
php-redis中的sort排序函数总结
2015/07/08 PHP
php 浮点数比较方法详解
2017/05/05 PHP
PHP多进程之pcntl_fork的实例详解
2017/10/15 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
PHP实现网站应用微信登录功能详解
2019/04/11 PHP
Laravel5.4简单实现app接口Api Token认证方法
2019/08/29 PHP
WordPress免插件实现面包屑导航的示例代码
2020/08/20 PHP
Javascript控制页面链接在新窗口打开具体方法
2013/08/16 Javascript
jquery的父子兄弟节点查找示例代码
2014/03/03 Javascript
javascript基本类型详解
2014/11/28 Javascript
javascript封装 Cookie 应用接口
2015/08/07 Javascript
微信小程序 教程之注册程序
2016/10/17 Javascript
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
2018/11/02 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
2020/01/03 Javascript
JavaScript交换变量的常用方法小结【4种方法】
2020/05/07 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
2020/12/01 Javascript
可用于监控 mysql Master Slave 状态的python代码
2013/02/10 Python
探究Python多进程编程下线程之间变量的共享问题
2015/05/05 Python
利用Python实现网络测试的脚本分享
2017/05/26 Python
pymongo中聚合查询的使用方法
2019/03/22 Python
windows下python虚拟环境virtualenv安装和使用详解
2019/07/16 Python
Python中注释(多行注释和单行注释)的用法实例
2019/08/28 Python
python 实现让字典的value 成为列表
2019/12/16 Python
pycharm开发一个简单界面和通用mvc模板(操作方法图解)
2020/05/27 Python
matplotlib部件之套索Lasso的使用
2021/02/24 Python
学校安全工作汇报材料
2014/08/16 职场文书
上课迟到检讨书300字
2014/10/15 职场文书
合作协议书格式范本
2016/03/21 职场文书
CSS3鼠标悬浮过渡缩放效果
2021/04/17 HTML / CSS
python办公自动化之excel的操作
2021/05/23 Python
MySQL 时间类型的选择
2021/06/05 MySQL
PyQt5结合QtDesigner实现文本框读写操作
2021/06/11 Python