html移除click事件绑定,带你了解JQuery中绑定事件(bind())和移除事件(unbind())...

本文主要向大家详细介绍了jQuery的绑定事件和移除事件的使用方法和示例分享,这里推荐给有需要的小伙伴们参考下。

有时候事件执行完了,想取消事件的效果可以通过一定的办法来处理。比如bind()(绑定事件)和unbind()(移除通过bind()方法添加的事件)方法来移除事件的效果。

比如下面的一个案例:

代码如下:

$(function(){

$('#btn').bind("click", function(){

$('#test').append("

绑定函数1

");

}).bind("click", function(){

$('#test').append("

绑定函数2

");

}).bind("click", function(){

$('#test').append("

绑定函数3

");

});

})

html部分:

代码如下:

Click Me

当点击按钮btn时,触发了三个点击事件,这里的append()方法,向p层中传递了三个段落内容。

append() 方法在被选元素的结尾(仍然在内部)追加指定内容。它与html()方法还是不同的,html()方法是改变整个元素中的内容,而不是向元素结尾追加内容。text()方法与html()方法类似,但区别在于html()方法中可以写入html的代码,而且可以被正确的解析,而text()只能当html代码为正常的字符串。

这里每次点击,都会执行一次事件,想p层末尾添加段落。下面的代码是取消事件效果的,可以通过删除事件,使点击效果失效:

代码如下:

$(function(){

$('#btn').bind("click", function(){

$('#test').append("

绑定函数1

");

}).bind("click", function(){

$('#test').append("

绑定函数2

");

}).bind("click", function(){

$('#test').append("

绑定函数3

");

});

$('#delAll').click(function(){

$('#btn').unbind("click");

});

})

$('#btn').unbind("click");这句代码的作用就是取消元素btn下的click事件。它不仅仅对于bind()方法有效,它对于click()方法同样有效。从某种角度上讲,bind("click",function(){})与click(function(){})是等价的。

还可以针对具体的方法,删除特定的事件。下面的代码可以参考:

代码如下:

$(function(){

$('#btn').bind("click", myFun1 = function(){

$('#test').append("

绑定函数1

");

}).bind("click", myFun2 = function(){

$('#test').append("

绑定函数2

");

}).bind("click", myFun3 = function(){

$('#test').append("

绑定函数3

");

});

$('#delTwo').click(function(){

$('#btn').unbind("click",myFun2);

});

})

unbind()方法的第二个参数是事件对应得执行函数的名字,这样执行完后,只有myFun2这个事件被删除了,其他两个click事件正常执行。

还有一种跟bind()方法类似的方法one(),区别大概就是one()方法只执行一次。为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。代码如下:

代码如下:

$(function(){

$('#btn').one("click", function(){

$('#test').append("

绑定函数1

");

}).one("click", function(){

$('#test').append("

绑定函数2

");

}).one("click", function(){

$('#test').append("

绑定函数3

");

});

})

点击后,只执行一次。再次点击不会触发效果。这就是one方法。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/564116.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

html怎么设计自己的网页,求一份自己设计的简单网页 HTML格式

A:百格*特点:该仪器用于均匀划出一定规格尺寸的方格,通过评定方格内涂膜的完整程度来评定涂膜对基材附着程度,以‘级’表示。它主要用于有机涂料划格法附着力的测定,不仅适用于实验室,也可用于各种条件下的…

VC2010 项目的创建

在VC2010中创建一个项目 1 . 创建新项目。打开我们的VC2010,点工具栏第一个按钮(New Project),或者菜单 File -> New -> Project…,或者按快捷键 CtrlShiftN,几种方式都可以。 2 . 在 “New Project…

html5教学案例撰写,怎样撰写教育教学案例

怎样撰写教育教学案例教学是教师的教和学生的学所组成的一种人类特有的人才培养活动。那么,怎样撰写教育教学案例呢?下面是小编收集整理的撰写教育教学案例的相关内容,希望对您有所帮助!1.撰写教育教学案例的思想准备要写好教育、教学案例,首…

error C2143: syntax error : missing ';' before '}'

我们在运行C程序的时候经常会遇到错误&#xff0c;如果你遇到了这个错误&#xff1a;error C2143: syntax error : missing ‘;’ before ‘}’&#xff0c;那麽我将帮你解决这个错误。 错误展示 完整代码 #include <stdio.h> #define exchange(a,b){int t; ta;ab;bt} …

绘制彩虹html代码,HTML5 Canvas 彩虹螺旋图生成器

JavaScript语言&#xff1a;JaveScriptBabelCoffeeScript确定$(function() {var myCanvas, context, width, height;var lines [],numberOfLines 12;var colours [#FFD800, #FF6A00, #FF0000, #0094FF, #0026FF, #4800FF, #7FFF8E, #B6FF00, #4CFF00, #FFFFFF];var Line fu…

VC2010运行C程序时黑框一闪就没

黑框一闪就没如何解决的呢&#xff1f; 首先我们要知道为什么黑框一闪就没 闪一下是因为它执行完输出函数(printf)后直接返回系统了。 解决办法 在程序里加一个system(“pause”)&#xff0c;这个是调用系统函数&#xff0c;到时候会显示"按任意键退出"。 使用方…

厦门大学计算机科学与技术学院考研分数线,2020年厦门大学计算机科学与技术考研经验分享...

原标题&#xff1a;2020年厦门大学计算机科学与技术考研经验分享大家好&#xff0c;我是育明考研小赵老师关于2020年厦门大学计算机科学与技术考研信息汇总&#xff0c;请参考一、院校介绍厦门大学(Xiamen University)&#xff0c;简称厦大(XMU)&#xff0c;是中华人民共和国教…

Redis ops详解

Redis缓存数据库的ops问题 我们使用Java操作Redis数据库的时候&#xff0c;往往会输出和ops相关的内容&#xff0c;下面给大家讲解一下ops相关的内容。 ops是什么&#xff1f; redis中的OPS 即operation per second 每秒操作次数。意味着每秒对Redis的持久化操作。 所以我们…

山东大学继续教育计算机在线作业,山东大学继续教育数文字电子技术基础习题3及答案.docx...

精品文档精品文档PAGEPAGE5精品文档PAGE..数字电子技术基础模拟卷3一填空。1逻辑代数中&#xff0c;基本的运算关系是与、或和非。2十进制数27转换成二进制数为11011&#xff1b;转换成8421BCD码是3在逻辑代数中&#xff0c;AABAB&#xff1b;A1。4同一个逻辑函数可以有不同的逻…

Spring操作Redis

在 Spring 中使用 Redis&#xff0c;除了需要 jedis.jar 外&#xff0c;还需要下载 spring-data-redis.jar&#xff0c;这里值得注意的是 jar 包和 Spring 版本兼容的问题&#xff0c;我使用的 jar 包版本是 1.8.1&#xff0c;而 Spring 的版本是 5.0.4&#xff0c;如果使用其他…

考研规划计算机科学与技术,2021考研:计算机科学与技术研究方向及冲刺复习规划...

一、研究方向20数据挖掘技术及应用21智能软件与计算理论22模式识别与图像处理23数据库理论及其应用技术24软件工程与面向对象设计&#xff0c;二、初试科目①101思想政治理论②201英语一③301数学一④408计算机学科专业基础综合三、考试内容和试卷结构数据结构、计算机组成原理…

Redis的6种数据类型

Redis 是一种基于内存的数据库&#xff0c;并且提供一定的持久化功能&#xff0c;它是一种键值&#xff08;key-value&#xff09;数据库&#xff0c;使用 key 作为索引找到当前缓存的数据&#xff0c;并且返回给程序调用者。 当前的 Redis 支持 6 种数据类型&#xff0c;它们…

华师计算机基础在线作业秋,18秋华师《计算机基础》在线作业(20210408185935).pdf...

正确答案 :( 多选题 ) 6: 微型计算机的输入设备主要有 ______ 。A: 键盘B: 鼠标C: 显示器D: 扫描仪正确答案 :( 多选题 ) 7: 以下工具软件属于数据压缩软件的有 ________ 。A: A1UB: WinZipC: RealPlayerD: WinRAR正确答案 :( 多选题 ) 8: 在 Excel 工作表中建立函数的方法有 _…

NoSQL和传统数据库的区别

Redis 等 NoSQL 工具也能够存储数据&#xff0c;有人认为 NoSQL 来会取代数据库&#xff0c;但是我不那么认为&#xff0c;我们要理解 NoSQL 和传统数据库的差异。 首先&#xff0c;NoSQL 的数据主要存储在内存中&#xff08;部分可以持久化到磁盘&#xff09;&#xff0c;而数…

内蒙古工业大学计算机科学与技术,计算机科学与技术的应用领域简述论文内蒙古工业大学.doc...

计算机科学与技术的应用领域简述论文内蒙古工业大学《计算机科学引论》课程专题报告题 目&#xff1a;计算机科学与技术的应用领域简述学生姓名: 徐铭贝学 院&#xff1a;信息工程学院系 别&#xff1a;计算机系专 业&#xff1a;计算机科学与技术班 级&#xff1a;计13-1学 号…

Redis字符串深入

字符串是 Redis 最基本的数据结构&#xff0c;它将以一个键和一个值存储于 Redis 内部&#xff0c;它犹如 Java 的 Map 结构&#xff0c;让 Redis 通过键去找到值。Redis 字符串的数据结构如下图所示。 Redis 会通过 key 去找到对应的字符串&#xff0c;比如通过 key1 找到 v…

Redis哈希数详解

Redis 中哈希结构就如同 Java 的 map 一样&#xff0c;一个对象里面有许多键值对&#xff0c;它是特别适合存储对象的&#xff0c;如果内存足够大&#xff0c;那么一个 Redis 的 hash 结构可以存储 2 的 32 次方减 1 个键值对&#xff08;40 多亿&#xff09;。 一般而言&…

计算机专业英语第三章在线测试,《计算机专业英语》第03章在线测试

《计算机专业英语》第03章在线测试 剩余时间&#xff1a; 57:06 答题须知&#xff1a;1、本卷满分20分。 2、答完题后&#xff0c;请一定要单击下面的“交卷”按钮交卷&#xff0c;否则无法记录本试卷的成绩。 3、在交卷之前&#xff0c;不要刷新本网页&#xff0c;否则你的答题…

Redis链表结构深入

链表结构是 Redis 中一个常用的结构&#xff0c;它可以存储多个字符串&#xff0c;而且它是有序的&#xff0c;能够存储 2 的 32 次方减 1 个节点&#xff08;超过 40 亿个节点&#xff09;。 Redis 链表是双向的&#xff0c;因此即可以从左到右&#xff0c;也可以从右到左遍历…

家用使用计算机组装,不能再简单了!家用电脑DIY组装实操

【天极网DIY硬件频道】【天极网硬件频道】近期有网友对DIY组装电脑比较感兴趣&#xff0c;因为自从智能手机和平板电脑横行霸道之后&#xff0c;家中的PC电脑被使用的时间变少了许多&#xff0c;可是偶尔有工作需求或是别有任务等&#xff0c;所以大家依然是不会让电脑远离的。…