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的放大镜效果
May 30 Javascript
Extjs4 GridPanel 的几种样式使用介绍
Apr 18 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
Aug 21 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
Dec 04 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
Aug 31 Javascript
JSON与String互转的实现方法(Javascript)
Sep 27 Javascript
基于vue实现swipe分页组件实例
May 25 Javascript
VUE实现表单元素双向绑定(总结)
Aug 08 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
Nov 01 Javascript
p5.js绘制创意自画像
Nov 04 Javascript
js生成1到100的随机数最简单的实现方法
Feb 07 Javascript
基于JS实现计算24点算法代码实例解析
Jul 23 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 防恶意刷新实现代码
2010/05/16 PHP
php中Socket创建与监听实现方法
2015/01/05 PHP
PHP合并数组函数array_merge用法分析
2017/02/17 PHP
php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式
2018/09/28 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
日期 时间js控件
2009/05/07 Javascript
Prototype String对象 学习
2009/07/19 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
2012/12/04 Javascript
JQuery触发事件例如click
2013/09/11 Javascript
JS与C#编码解码
2013/12/03 Javascript
jQuery实现简单的间隔向上滚动效果
2015/03/09 Javascript
jQuery实现新消息在网页标题闪烁提示
2015/06/23 Javascript
AngularJs Modules详解及示例代码
2016/09/01 Javascript
Javascript+CSS3实现进度条效果
2016/10/28 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
2016/12/19 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
jquery+css实现简单的图片轮播效果
2017/08/07 jQuery
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
2018/03/12 Javascript
Vue常用指令详解分析
2018/08/19 Javascript
vue最简单的前后端交互示例详解
2018/10/11 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
2020/02/01 Javascript
Vue filter 过滤器、以及在table中的使用介绍
2020/09/07 Javascript
Vant 中的Toast设置全局的延迟时间操作
2020/11/04 Javascript
python3.6数独问题的解决
2019/01/21 Python
keras tensorflow 实现在python下多进程运行
2020/02/06 Python
HTML5 Canvas锯齿图代码实例
2014/04/10 HTML / CSS
欧洲第一中国智能手机和平板电脑网上商店:CECT-SHOP
2018/01/08 全球购物
匡威俄罗斯官网:Converse俄罗斯
2020/05/09 全球购物
在求职信中如何凸显个人优势
2013/10/30 职场文书
公司委托书范本
2014/04/04 职场文书
国家税务局领导班子对照检查材料思想汇报
2014/10/04 职场文书
标准离婚协议书范文下载
2014/11/30 职场文书
推销搭讪开场白
2015/05/28 职场文书
春节晚会开场白
2015/05/29 职场文书
MySQL视图概念以及相关应用
2022/04/19 MySQL