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将标签元素的高设为屏幕的百分比
Apr 19 jQuery
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
jQuery EasyUI开发技巧总结
Sep 26 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
AJAX在JQuery中的应用详解
Jan 30 jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 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
深入PHP获取随机数字和字母的方法详解
2013/06/06 PHP
php实例分享之通过递归实现删除目录下的所有文件详解
2014/05/15 PHP
启用Csrf后POST数据时出现的400错误
2015/07/05 PHP
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
[IE&amp;FireFox兼容]JS对select操作
2007/01/07 Javascript
jQuery中使用了document和window哪些属性和方法小结
2011/09/13 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
2013/01/23 Javascript
解决JS中乘法的浮点错误的方法
2014/01/03 Javascript
在JavaScript中重写jQuery对象的方法实例教程
2014/08/25 Javascript
在JavaScript中构建ArrayList示例代码
2014/09/17 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
2014/12/28 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
2015/02/05 Javascript
JavaScript获取URL汇总
2015/06/08 Javascript
JS获取鼠标坐标位置实例分析
2016/01/20 Javascript
Jquery为DIV添加click事件的简单实例
2016/06/02 Javascript
ES6记录异步函数的执行时间详解
2016/08/31 Javascript
浅析Jquery操作select
2016/12/13 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
2017/07/10 jQuery
基于webpack4+vue-cli3项目实现换肤功能
2019/07/17 Javascript
JavaScript回调函数callback用法解析
2020/01/14 Javascript
python网络编程学习笔记(七):HTML和XHTML解析(HTMLParser、BeautifulSoup)
2014/06/09 Python
Python学习笔记之if语句的使用示例
2017/10/23 Python
Python中安装easy_install的方法
2018/11/18 Python
Python列表list常用内建函数实例小结
2019/10/22 Python
Python包资源下载路径报404解决方案
2020/11/05 Python
HTML5的video标签的浏览器兼容性增强方案分享
2016/05/19 HTML / CSS
英国网上购买肉类网站:Great British Meat
2018/10/17 全球购物
惠普香港官方商店:HP香港
2019/04/30 全球购物
八年级英语教学反思
2014/01/09 职场文书
创先争优承诺书
2015/01/20 职场文书
出纳岗位职责
2015/01/31 职场文书
农村党员干部承诺书
2015/05/04 职场文书
终止解除劳动合同证明书
2015/06/17 职场文书
教师节主题班会方案
2015/08/17 职场文书
Oracle表空间与权限的深入讲解
2021/11/17 Oracle
MySQL创建管理RANGE分区
2022/04/13 MySQL