jQuery动态移除与增加onclick属性的方法详解


Posted in jQuery onJune 07, 2018

本文实例讲述了jQuery动态移除与增加onclick属性的方法。分享给大家供大家参考,具体如下:

这里给大家介绍利用jquery的removeAttrattr事件来给a标签增加与删除onclick事件的具体操作方法,有需要了解的朋友可参考。

要实现效果:点击链接先去掉onclick属性,3秒后再自动加上该标签中的onclick属性

jQuery中,针对标签属性的操作都是使用attr()方法来实现的,比如:$("a").attr("onclick")可获得a标签的onclick属性,对应的:

增加事件

$(选择器).attr(属性名) 它的作用就是获取指定元素( $(选择器)部分 )的指定属性的值

如设置onclick属性:

$("a").attr("onclick","test();");

删除事件

$(selector).removeAttr(attribute)

例如 删除onclick属性:

$("a").removeAttr("onclick");

理论上上面的代码没问题,但实际上上面语句不执行也不报错,后来发现原因:

jquery 1.6之前的版本并不支持attr()方法对标签onclick属性的相关操作!

换句话说要使用attr()方法操作标签中的onclick属性必须使用jq库1.6或更新的库版本!

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
 $(".b").click(function(){
 $(this).removeAttr("onclick");
 setTimeout(function(){
  $(".b").attr("onclick","test();");
  },3000)
 })
 })
function test(){}
</script>
<p>
 <a class="b" href="#" rel="external nofollow" onclick="test();">点击去掉该链接的onclick属性,3秒后再自动加上该onclick属性</a>
</p>

jquery中删除属性的关键词是: removeAttr 注意A是大写

jquery还有一个解除事件委派的方法:unbind([eventType])。参数是可选的,如果不选,则表示移除节点所有已绑定事件。

这里你只需要解除click事件,可以用$("#s1").unbind("click")来处理。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
jquery实现图片放大点击切换
Jun 06 jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
jQuery创建及操作xml格式数据示例
May 26 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
AJAX在JQuery中的应用详解
Jan 30 jQuery
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 #jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 #jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 #jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 #jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 #jQuery
jQuery实现的简单获取索引功能示例
Jun 04 #jQuery
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 #jQuery
You might like
关于Iframe如何跨域访问Cookie和Session的解决方法
2013/04/15 PHP
win7计划任务定时执行PHP脚本设置图解
2014/05/09 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
通过javascript设置css属性的代码
2009/12/28 Javascript
JAVASCRIPT style 中visibility和display之间的区别
2010/01/22 Javascript
jquery1.10给新增元素绑定事件的方法
2014/03/06 Javascript
AngularJS实现表单手动验证和表单自动验证
2015/12/09 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
2016/03/05 Javascript
jquery 判断selection range 是否在容器中的简单实例
2016/08/02 Javascript
JS中with的替代方法与String中的正则方法详解
2016/12/23 Javascript
100行代码理解和分析vue2.0响应式架构
2017/03/09 Javascript
关于Angular2 + node接口调试的解决方案
2017/05/28 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
2017/12/06 Javascript
基于jquery实现左右上下移动效果
2018/05/02 jQuery
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
2020/09/16 Javascript
Openlayers实现地图全屏显示
2020/09/28 Javascript
[02:27]2018DOTA2亚洲邀请赛趣味视频之钓鱼大赛 谁是垂钓冠军?
2018/04/05 DOTA
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
浅谈Python 列表字典赋值的陷阱
2019/01/20 Python
python3 enum模块的应用实例详解
2019/08/12 Python
keras .h5转移动端的.tflite文件实现方式
2020/05/25 Python
python中Django文件上传方法详解
2020/08/05 Python
如何利用Python动态模拟太阳系运转
2020/09/04 Python
CSS3实战第一波 让我们尽情的圆角吧
2010/08/27 HTML / CSS
院药学专业个人求职信
2013/09/21 职场文书
药学专业大学生个人的自我评价
2013/11/04 职场文书
个人查摆剖析材料
2014/10/04 职场文书
基层干部个人对照检查及整改措施
2014/10/28 职场文书
学生喝酒检讨书500字
2014/11/02 职场文书
2014年学生会部门工作总结
2014/11/07 职场文书
2014年店长工作总结
2014/11/17 职场文书
领导工作表现评语
2015/01/04 职场文书
详解Spring事件发布与监听机制
2021/06/30 Java/Android
python基础之模块的导入
2021/10/24 Python
Python集合set()使用的方法详解
2022/03/18 Python