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 相关文章推荐
js和jquery中获取非行间样式
May 05 jQuery
jquery仿微信聊天界面
May 06 jQuery
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
基于jQuery拖拽事件的封装
Nov 29 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
vBulletin Forum 2.3.xx SQL Injection
2006/10/09 PHP
dedecms系统的广告设置代码 基础版本
2010/04/09 PHP
Swoole 5将移除自动添加Event::wait()特性详解
2019/07/10 PHP
JavaScript中继承的一些示例方法与属性参考
2010/08/07 Javascript
jQuery LigerUI 使用教程表格篇(1)
2012/01/18 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
2013/05/07 Javascript
用JS做的简单的可折叠的两级树形菜单
2013/09/21 Javascript
Javascript执行效率全面总结
2013/11/04 Javascript
JavaScript结合AJAX_stream实现流式显示
2015/01/08 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
2015/11/24 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
2016/08/04 Javascript
JS控制FileUpload的上传文件类型实例代码
2016/10/07 Javascript
微信小程序  自定义创建详细介绍
2016/10/27 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
2017/01/16 Javascript
详解使用fetch发送post请求时的参数处理
2017/04/05 Javascript
Angular2安装angular-cli
2017/05/21 Javascript
js实现弹窗猜数字游戏
2020/11/26 Javascript
深度定制Python的Flask框架开发环境的一些技巧总结
2016/07/12 Python
python字符串的index和find的区别详解
2020/06/20 Python
Python实时监控网站浏览记录实现过程详解
2020/07/14 Python
Python爬取微信小程序通用方法代码实例详解
2020/09/29 Python
家乐福巴西网上超市:Carrefour巴西
2016/10/31 全球购物
花园仓库建筑:Garden Buildings Direct
2018/02/16 全球购物
美国领先的在线邮轮旅游公司:CruiseDirect
2018/06/07 全球购物
Expedia西班牙:预订酒店、机票、旅行和廉价度假套餐
2019/04/10 全球购物
介绍一下如何优化MySql
2016/12/20 面试题
干部现实表现材料
2014/02/13 职场文书
铲车司机岗位职责
2014/03/15 职场文书
小学生作文评语大全
2014/04/21 职场文书
祖国在我心中演讲稿500字
2014/05/04 职场文书
酒后驾车标语
2014/06/30 职场文书
大学生逃课检讨书
2015/05/04 职场文书
学前教育见习总结
2015/06/23 职场文书
毕业感言怎么写
2015/07/31 职场文书
六种css3实现的边框过渡效果
2021/04/22 HTML / CSS