jq 事件取消绑定与重新绑定
前端有时会碰到这样的需求: 点击某个元素发送ajax请求, 发送期间此元素的鼠标相关事件(比如点击)无效, 发送完成鼠标点击事件功能恢复,
对于这种需求, 我们会遇到两种情况,
一种是点击的按钮为form表单元素,
例如是 type="submit"的button的话, 由于是表单元素, 可使用属性 disabled 禁用
第二种是非form表单元素,
例如是一个div元素, 非表单元素不存在 disabled 属性, 可使用 pointer-events: none 这个css属性禁用此元素的鼠标事件
但pointer-events不支持ie11以下的ie浏览器, 如果你的项目不需要兼容ie11以下, 下面的可以略过不看,
下面是我们要重点说的使用jq解决的方法:
方法一:
function func(){..}
// 绑定
$(document).on('click.bar', '.foo', func)
// 取消绑定
$(document).off('click.bar', '.foo')
// 重新绑定
$(document).on('click.bar', '.foo', func)
即将事件函数声明为命名函数而不是匿名函数, 适用于事件函数已命名并且函数变量易于获取的情况,
若情况不适用, 则考虑方法二
方法二:
<a href="javascript:;" id="button">button</a>
<div class="unbind">unbind</div>
<div class="rebind">rebind</div>
// 为#button动态(委托)绑定事件
$(document).on('click', 'a#button', function(){
console.log(0);
});
$(document).on('click', 'a#button', function(){
console.log(1);
});
// 为#button直接绑定事件
$('a#button').on('click', function(){
console.log(2);
}); $(document).on('click', '.unbind', function(){
$('a#button').on('click.disable', false);
}); $('.rebind').click(function () {
$('a#button').off('click.disable'); })
点击button, 会依次打印 2 0 1, 因为直接绑定事件是直接将事件函数绑定在当前调用的元素上, 而动态绑定依靠事件冒泡捕捉元素动态绑定, 所以 2 先于 0 1被打印出来
点击.unbind 元素后, 所有动态绑定的事件函数都不会执行, 直接绑定的事件函数正常执行, 会打印 2
点击.rebind 元素后, 动态绑定的事件函数正常执行, 会依次打印 2 0 1
注意两点:
此取绑/重绑方法只适用于动态绑定事件
jq 事件取消绑定与重新绑定的更多相关文章
- jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载
jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载 一丶jQuery动画 show,hide, ...
- jq事件绑定
有些时候我们在页面中会动态的添加一下dom结构,当我们想要给这些结点添加事件时需要在此节点绑定一系列的操作. <a href="#" onclick="addBtn ...
- jquery 用addClass之后 class有对应的事件,为什么要重新绑定一下事件呢
假设有元素A,B,C,其中A和B都有class属性cls,如果在页面加载完成时,给具有class属性为cls的元素绑定某一事件,例如click,执行事件时调用alert.也就是说,页面加载完成后A和B ...
- one(type,[data],fn) 为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。
one(type,[data],fn) 概述 为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数. 在每个对象上,这个事件处理函数只会被执行一次.其他规则与bind()函数相同.这 ...
- React入门---事件与数据的双向绑定-9
上一节中,我们是从父组件给子组件传送数据,要实现事件与数据的双向绑定,我们来看如何从子组件向父组件传送数据; 接触之前,我们看一些里面函数绑定的知识: 例:通过点击事件改变state的age属性值: ...
- 【Angular 5】数据绑定、事件绑定和双向绑定
本文为Angular5的学习笔记,IDE使用Visual Studio Code,内容是关于数据绑定,包括Property Binding.Class Binding.Style Binding. 在 ...
- jquery绑定事件的坑,重复绑定问题
我实现点击table表格中的删除按钮,找到当前按钮的祖先元素tr 然后删除该行,但是我首先点击删除的时候要先弹出提示框,是否要下载,这时在点击删除按钮删除,之前没有考虑到事件重复绑定问题,所以每次点击 ...
- 巨蟒python全栈开发数据库前端6:事件onclick的两种绑定方式&&onblur和onfocus事件&&window.onload解释&&小米商城讲解
1.回顾上节内容(JavaScript) 一.JavaScript概述 1.ECMAScript和JavaScript的关系 2.ECMAScript的历史 3.JavaScript是一门前后端都可以 ...
- jq事件
1,ready:当DOM载入就绪可以查询及操纵时绑定一个要执行的函数,在使用之前必须确保body元素的onload事件,,没有注册函数,否则不会触发ready函数. $(document).ready ...
随机推荐
- Ubuntu sudo apt-get 安装下载更新软件包命令详解
sudo apt-get install package 安装软件包sudo apt-get install package - - reinstall 重新安装 ...
- AI mac安装TensorFlow
1.安装pip sudo easy_install pip 2.安装virtualenv sudo pip install --upgrade virtualenv 3.在指定目录创建virtuale ...
- stm32cubemx学习要点记录
如果有些外设的HAL库函数找不到的话,你可以到IAR工程的文件夹显示栏中找如下图所示:
- 查看Orcale数据里的表是否有变化
由于我们公司一个数据库两个应用在使用,导致一个应用修改了数据库,另一个应用用的缓存而不知道有更新还是原来的结果.原来的处理方式是采用session缓存的方式,用户登出了就清空缓存,这样只需要重新登录一 ...
- Redis详解(七)------ AOF 持久化
上一篇文章我们介绍了Redis的RDB持久化,RDB 持久化存在一个缺点是一定时间内做一次备份,如果redis意外down掉的话,就会丢失最后一次快照后的所有修改(数据有丢失).对于数据完整性要求很严 ...
- SpringBoot favicon.ico
默认的favicon.ico spring boot 默认输出spring的logo, 可以使用spring.mvc.favicon.enabled=false将其关闭 ############### ...
- Linux查看特定端口是否被占用并kill掉相关进程
今天在搭建Zookeeper集群的时候,需要频繁启动zookeeper,但是启动的时候,有时会提示下列错误信息: zookeeper需要的地址已经被占用了,其实是因为上一次的zookeeper没有关闭 ...
- docker for windows 10 添加阿里云镜像仓库无效问题
原来一直是用cmd来执行docker 命令的,结果今天发现不行了,改了镜像仓库也pull不下来. 后来换用powerShell执行docker pull 才成功.大家可以试试 win+R 运行 po ...
- WPF开发汽车采样机上位机软件
由于项目需要,需开发同一套汽车.火车.皮带采样机的上位机软件. 看过之前的上位机软件,老版本都是DelPhi.VB开发,稍微新语言开发的是采用winform开发.要不就是使用组态软件. Delphi语 ...
- PMO在组织中实现价值应做的工作
PMO在组织中实现价值应做的工作 研发人员及项目经理常常对PMO有反感情绪,认为其不熟悉业务流程与技术.经常要求项目经理和研发人员提交形式化的材料,只审批和监控,不能为项目提供良好的服务.在很多企业, ...