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源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
详解jquery选择器的原理
Aug 01 jQuery
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
jQuery实现的中英文切换功能示例
Jan 11 jQuery
JQuery的加载和选择器用法简单示例
May 13 jQuery
jquery实现购物车基本功能
Oct 25 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
thinkPHP实现瀑布流的方法
2014/11/29 PHP
php微信支付之APP支付方法
2015/03/04 PHP
JQuery 无废话系列教程(二) jquery实战篇上
2009/06/23 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
2011/12/26 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
2014/01/25 Javascript
nodejs导出excel的方法
2015/06/30 NodeJs
windows下安装nodejs及框架express
2015/08/07 NodeJs
jQuery点击改变class并toggle及toggleClass()方法定义用法
2015/12/11 Javascript
AngularJS中的API(接口)简单实现
2016/07/28 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
2017/01/20 Javascript
jQuery实现最简单实用的分秒倒计时
2017/02/05 Javascript
angular1配合gulp和bower的使用教程
2018/01/19 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
2018/04/24 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
2018/12/13 Javascript
教你完全理解ReentrantLock重入锁
2019/06/03 Javascript
解决vue-cli 打包后自定义动画未执行的问题
2019/11/12 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
2020/05/13 Javascript
在Docker上开始部署Python应用的教程
2015/04/17 Python
python实现支持目录FTP上传下载文件的方法
2015/06/03 Python
Python检测网站链接是否已存在
2016/04/07 Python
python的mysqldb安装步骤详解
2017/08/14 Python
Python实现自动为照片添加日期并分类的方法
2017/09/30 Python
Python实现代码统计工具
2019/09/19 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
python+opencv边缘提取与各函数参数解析
2020/03/09 Python
前端canvas动画如何转成mp4视频的方法
2019/06/17 HTML / CSS
Spartoo芬兰:欧洲最大的网上鞋店
2016/08/28 全球购物
巴西最大的体育用品商城:Netshoes巴西
2016/11/29 全球购物
eHarmony英国:全球领先的认真恋爱约会平台之一
2020/11/16 全球购物
汽车制造与装配专业自荐信范文
2014/01/02 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
2014年骨干教师工作总结
2014/12/19 职场文书
教导处教学工作总结
2015/08/12 职场文书
2016小学优秀教师先进事迹材料
2016/02/26 职场文书
详解Java实现数据结构之并查集
2021/06/23 Java/Android
MYSQL 表的全面总结
2021/11/11 MySQL