jQuery bind and unbind (绑定和解除)
页面代码:
<body>
<input type="button" name="aaa" value="点击我">
<input type="checkbox" name="checkbox1"> </body>
JQuery代码:
$().ready(function(){
for (var i = 0; i < 3; i++) {
$("input[type='button']").click(function(){
alert("aaaa");
}); }
}
alert("aaaa")会执行三次,在事件嵌套事件中,不希望看到这样的情况,需要把上层事件禁用,此时可引入bind和unbind函数解决。
引入函数:
for (var i = 0; i < 3; i++) {
$("input[type='button']").unbind("click");
$("input[type='button']").bind("click", function(){
alert("aaa");
});
}
bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数
unbind() 方法移除被选元素的事件处理程序。能够移除所有的或被选的事件处理程序,或者当事件发生时终止指定函数的运行。
event 是
事件类型,类型包括:blur、flcus、load、resize、scroll、unload、click、dblclikc、mousedown、
mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、
select、submit、keydown、keypress、keyup和error等,当然也可以是自定义名称。
data 为可选参数,作文event.data属性值传递给事件对象的额外数据对象。
function 是用来绑定的处理函数。
语法:
$(selector).bind(event,data,function)
// event 和 function 必须指出
下面些段代码做说明:
例1:删除p的所有事件
$("p").unbind();
例2:删除p的click事件
$("p").unbind("click");
例2:删除p元素click事件后出发的test函数 和 添加p元素click事件后触发的test函数
$("p").unbind("click",test);
$("p").bind("click",test);
注意:要定义 .bind() 必须指明什么事件和函数
现在来看个简单的demo , 整个div有一个点击收起展开的事件,如果想要点击链接但是不触发div的点击事件,需要在触发链接的时候把div的点击事件禁用,这里我用到链接 mouseenter事件是unbind删除div的事件。这里还不算完,这时候只要鼠标进入链接区域,div的点击事件就删除了,我们还需要加入鼠标移 出链接区域的时候恢复div点击事件。代码如下:
1 |
$(function(){ var Func = function(){ $(".com2").toggle(200); }
|
jQuery bind and unbind (绑定和解除)的更多相关文章
- JQuery中bind和unbind函数与onclick绑定事件区分
JQuery中bind和unbind函数转载: https://blog.csdn.net/liucheng417/article/details/51131982 页面代码: <body& ...
- JQuery 的bind和unbind函数
测试:页面代码:<body> <input type="button" name="aaa" value="点击我" ...
- jquery的bind跟on绑定事件的区别
jquery的bind跟on绑定事件的区别:主要是事件冒泡: jquery文档中bind和on函数绑定事件的用法: .bind(events [,eventData], handler) .on(ev ...
- Jquery中的事件绑定$("#btn").bind("click",function(){ })
Jquery中的事件绑定:$("#btn").bind("click",function(){ }) 由于每次都这么调用太麻烦,所以jquery就用$(&qu ...
- jQuery三种事件绑定方式.bind(),.live(),.delegate()
.bind(), .live(), 和 .delegate()之间的区别并不明显.但是理解它们的不同之处有助于写出更简洁的代码,并防止我们的交互程序中出现没有预料到的bug. 基础 DOM树 首先,图 ...
- jQuery中的事件绑定的几种方式
jQuery目前有on(),bind(),delegate(),live()四种绑定方式,但是随着版本的不断更新,有的方式也相应的被淘汰掉 [band()方式绑定] 3.0版本之前的绑定方式比较常用的 ...
- jQuery中的事件绑定方法
在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知 ...
- 关于jQuery新的事件绑定机制on()的使用技巧
关于jQuery新的事件绑定机制on()的使用技巧 http://www.jb51.net/article/36064.htm 本篇文章介绍了,关于jQuery新的事件绑定机制on()的使用技巧.需要 ...
- jquery bind、delegate、live、on的区别及联系
jquery bind.delegate.live.on的区别及联系 概述 jquery提供了好几个API都可以实现事件绑定, 如 delegate, live , bind 等, 可是有没有疑惑这几 ...
随机推荐
- ruby 字符串学习2
在一个ruby字符串中包含表但是或者变量.想使用不同的值替换表达式或者变量 1 类似java 或者python的printf-style方式 template = 'Oceania has alway ...
- Windows下Nginx的启动、停止等命令(转)
Windows下Nginx的启动.停止等命令 在Windows下使用Nginx,我们需要掌握一些基本的操作命令,比如:启动.停止Nginx服务,重新载入Nginx等,下面我就进行一些简单的介绍.1.启 ...
- 找不到方法"Boolean System.Threading.WaitHandle.WaitOne(TimeSpan)"的解决方案
找不到方法"Boolean System.Threading.WaitHandle.WaitOne(TimeSpan)" http://www.microsoft.com/down ...
- 求链表中倒数第k个节点
注意鲁棒性和算法效率的典型例题:(头文件省略) typedef struct node { int data; struct node* next; }ListNode; ListNode* Find ...
- 实验室中搭建Spark集群和PyCUDA开发环境
1.安装CUDA 1.1安装前工作 1.1.1选取实验器材 实验中的每台计算机均装有双系统.选择其中一台计算机作为master节点,配置有GeForce GTX 650显卡,拥有384个CUDA核心. ...
- redis(二)Redis适用场景,如何正确的使用
网络IO模型 Memcached是多线程,非阻塞IO复用的网络模型,分为监听主线程和worker子线程,监听线程监听网络连接,接受请求后,将连接描述字pipe 传递给worker线程,进行读写IO, ...
- js时间冒泡,阻止事件冒泡
首先解释一下事件冒泡神什么, 在js中,假如在div中嵌套一个div 如 <style type="text/css"> #box1{width:500px;heigh ...
- Winserver2008R2 .netframework4.5 asp.netmvc 访问出现的是文件列表。
Winserver2008R2 .netframework4.5 asp.netmvc 访问出现的是文件列表,服务器需要安装如下的补丁,才可正常访问. http://www.microsoft.com ...
- Java基础——多线程
Java中多线程的应用是非常多的,我们在Java中又该如何去创建线程呢? http://www.jianshu.com/p/40d4c7aebd66 一.常用的有三种方法来创建多线程 新建一个类继承自 ...
- Python 编程规范-----转载
Python编程规范及性能优化 Ptyhon编程规范 编码 所有的 Python 脚本文件都应在文件头标上 # -*- coding:utf-8 -*- .设置编辑器,默认保存为 utf-8 格式. ...