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 相关文章推荐
js每次Title显示不同的名言
Sep 25 Javascript
js鼠标左右键 键盘值小结
Jun 11 Javascript
js创建子窗口并且回传值示例代码
Jul 02 Javascript
用javascript为页面添加天气显示实现思路及代码
Dec 02 Javascript
js识别不同浏览器基于userAgent做判断
Jul 29 Javascript
纯CSS3代码实现滑动开关效果
Aug 19 Javascript
详解微信小程序开发之下拉刷新 上拉加载
Nov 24 Javascript
你可能不知道的JSON.stringify()详解
Aug 17 Javascript
JavaScript实现图片拖曳效果
Sep 08 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
Apr 25 Javascript
JS删除数组指定值常用方法详解
Jun 04 Javascript
jQuery treeview树形结构应用
Mar 24 jQuery
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递归算法的详细示例分析
2013/02/19 PHP
php 参数过滤、数据过滤详解
2015/10/26 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
jquery入门—访问DOM对象方法
2013/01/07 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
2015/04/17 Javascript
JavaScript取得WEB安全颜色列表的方法
2015/07/14 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
2016/09/09 Javascript
JS+HTML5实现图片在线预览功能
2017/07/22 Javascript
JS如何设置元素样式的方法示例
2017/08/28 Javascript
详解webpack提取第三方库的正确姿势
2017/12/22 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
2018/09/27 Javascript
Vue.js组件实现选项卡以及切换特效
2019/07/24 Javascript
JS Ajax请求会话过期处理问题解决方法分析
2019/11/16 Javascript
jQuery开发仿QQ版音乐播放器
2020/07/10 jQuery
Python实现查找系统盘中需要找的字符
2015/07/14 Python
基于Python 装饰器装饰类中的方法实例
2018/04/21 Python
Django管理员账号和密码忘记的完美解决方法
2018/12/06 Python
Python3之不使用第三方变量,实现交换两个变量的值
2019/06/26 Python
django使用admin站点上传图片的实例
2019/07/28 Python
python flask搭建web应用教程
2019/11/19 Python
PyTorch里面的torch.nn.Parameter()详解
2020/01/03 Python
Python爬虫库BeautifulSoup的介绍与简单使用实例
2020/01/25 Python
python如何将两张图片生成为全景图片
2020/03/05 Python
详解pycharm连接远程linux服务器的虚拟环境的方法
2020/11/13 Python
python中doctest库实例用法
2020/12/31 Python
python爬虫用request库处理cookie的实例讲解
2021/02/20 Python
css3进行截取替代js的substring
2013/09/02 HTML / CSS
Notino芬兰:购买香水和化妆品
2019/04/15 全球购物
nohup的用法
2012/11/26 面试题
PyQt 如何创建自定义QWidget
2021/03/24 Python
应届护士求职信范文
2014/01/26 职场文书
2014教师党员自我评议总结
2014/09/19 职场文书
2014年领导班子专项整治整改方案
2014/09/28 职场文书
如何签定毕业生就业协议书
2014/09/28 职场文书
2015年药品销售工作总结范文
2015/05/25 职场文书
MutationObserver在页面水印实现起到的作用详解
2022/07/07 Javascript