JQuery中事件绑定中on绑定的一些小bug
时间:2018-09-12
本文章向大家介绍JQuery中事件绑定中on绑定的一些小bug,需要的朋友可以参考一下
---恢复内容开始---
今天我们来说说关于JQuery中事件绑定中on绑定的一些小问题,直接上代码了,大家拷下去就可以用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0 } li { list-style: none } .ul_one, .ul_two { overflow: hidden; float: left; margin-left: 400px; margin-top: 200px; } .ul_one>li, .ul_two>li { text-align: center; height: 40px; width: 120px; background-color: yellow; border: 1px solid gray; line-height: 40px; } .ul_two>li { background-color: green; } p{color: green;font-size: 20px;clear:both;margin-left: 300px;margin-top: 20px} </style> </head> <body> <ul class="ul_one"> <li>a1</li> <li>a2</li> <li>a3</li> <li>a4</li> </ul> <ul class="ul_two"> <li>b1</li> <li>b2</li> <li>b3</li> <li>b4</li> </ul> <p>当我们在on函数的参数里面传入了子元素的参数 on的绑定机制类似于事件绑定,所以我们才不能移除某个子元素的事件</p> <p>而当我们不传入子元素的参数,on的绑定机制相当于循环绑定,所以此时我们可以移除某个子元素的事件</p> <p>注意:需要引入JQuery,打开控制台看输出,打开源码看注释</p> </body> </html> <script src="jquery-1.11.3.js"></script> <script> //JQuery中on绑定的一些小坑 // 然后用on来对两个ul进行绑定 // 这种方法将第二个参数填入 即将子元素参数填入 $(".ul_one").on("click", "li", function () { console.log(this) //可以看到事件已经绑定上 }) //现在尝试给第一个子元素移除事件 $(".ul_one").children().eq(0).off("click"); // 你会发现根本移除不掉 // 可以对未来元素实现绑定 var newli1 = $("<li>a未来元素</li>"); $(".ul_one").append(newli1) // 由于on的第二个参数是可选参数我们来试试换种写法 $(".ul_two>li").on("click", function () { console.log(this) }) // 来,我们现在移除某个子元素的事件 $(".ul_two").children().eq(0).off("click"); //你会发现现在可以移除掉第一个子元素的事件 //不能对未来元素实现绑定 var newli2 = $("<li>b未来元素</li>"); $(".ul_two").append(newli2) // 重要 重要 // 那为什么会造成这种情况呢 // 当我们在on函数的参数里面传入了子元素的参数 on的绑定机制类似于事件绑定,所以我们才不能移除某个子元素的事件,能对未来元素实现绑定 // 而当我们不传入子元素的参数,on的绑定机制相当于循环绑定,所以此时我们可以移除某个子元素的事件,但不能实现对未来元素实现绑定 </script>
---恢复内容结束---
---恢复内容结束---
- 实践重于理论——创建一个监控程序探测WCF的并发处理机制
- 分布式科学计算与Docker
- 学习SpringMVC——说说视图解析器
- Java豆瓣电影爬虫——模拟登录的前世今生与验证码的爱恨情仇
- Java豆瓣电影爬虫——减少与数据库交互实现批量插入
- 谈谈C# 4.0新特性“缺省参数”的实现
- 如何实现对上下文(Context)数据的统一管理 [提供源代码下载]
- 不再和人工智能对弈?柯洁:我要食言了
- Spring实战——Profile
- Spring实战——XML和JavaConfig的混合配置
- ambari安装指南
- Spring实战——通过Java代码装配bean
- WCF技术剖析之三十一: WCF事务编程[中篇]
- Spring实战——无需一行xml配置实现自动化注入
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Golang之rpc框架rpcx
- gin websocket 一对一聊天
- Go 中文和unicode字符之间转换
- Go 加密解密算法总结
- Linux 中几个正则表达式的用法
- embedded.AnnotationConfigEmbeddedWeb ApplicationContext@1e67b872 has been closed already
- Js实现list导出为excel表格
- 宿舍(寝室)管理系统设计与实现(SSM框架 附 详细系统搭建教程、系统演示地址、实现过程、源码)
- Redis get key error
- elastic search 日志不打印问题(root用户惹的祸)
- 起飞 | 应用YOLOV4 - DeepSort 实现目标跟踪
- 如何将elastic search 的健康状态由红色red变为绿色green
- 拥抱K8s系列-01
- elastic search 修改日志级别为warn
- prometheus学习笔记(3)-使用exporter监控mysql