jquery 用addClass之后 class有对应的事件,为什么要重新绑定一下事件呢
假设有元素A,B,C,其中A和B都有class属性cls,如果在页面加载完成时,给具有class属性为cls的元素绑定某一事件,例如click,执行事件时调用alert。也就是说,页面加载完成后A和B都会被绑定事件,但C没有绑定。绑定事件相当于给A和B添加了一个click属性,显然此时C是没有该属性的。然后你给C添加了cls的class,但此时你做的事情仅仅是添加class,而没有绑定事件,所以,尽管C有cls属性,但它没有绑定事件,绑定事件和添加class是两件事,如果只做了一个,不会影响另一个的。
再比如说,你给A和B绑定事件后,再去掉A的cls的class,此时A没有cls,但事件应经绑定了,A的click事件依然有效。它不会因为cls的移除而取消已经绑定的事件。
如果你想要后续增加class的元素能够自动绑定事件,可以使用jquery的live方法
如
$('.class').live("click",function(){
//TODO
});
jQuery中.bind() .live() .delegate() .on()的区别点击打开链接 jQuery的.bind()、.live()和.delegate()之间区别
bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数
$("a").bind("click",function(){alert("ok");});
live(type,[data],fn) 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的
$("a").live("click",function(){alert("ok");});
delegate(selector,[type],[data],fn) 指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数
$("#container").delegate("a","click",function(){alert("ok");})
on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数
差别:
.bind()是直接绑定在元素上
.live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的,绑定到document DOM节点上。和.bind()的优势是支持动态数据。
.delegate()则是更精确的小范围使用事件代理,性能优于.live()
.on()则是最新的1.7版本整合了之前的三种方式的新事件绑定机制
jquery 用addClass之后 class有对应的事件,为什么要重新绑定一下事件呢的更多相关文章
- JS与Jquery的事件委托——解决了绑定相同事件的问题
概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完 ...
- jQuery的addClass,removeClass和toggleClass方法
jQuery的addClass,removeClass和toggleClass方法,最后一个方法在某一情形之下,可以替代前面2个方法. 第一个方法addClass为元素添加一个class. 第二个方法 ...
- jQuery 绑定事件及移除绑定事件方法和元素事件列表
1.jQuery Event 事件: ready(fn); $(document).ready()注意在body中没有onload事件,否则该函数不能执行.在每个页面中可以有很多个函数被加载 ...
- jquery中取消和绑定hover事件的正确方式
在网页设计中,我们经常使用jquery去响应鼠标的hover事件,和mouseover和mouseout事件有相同的效果,但是这其中其中如何使用bind去绑定hover方法呢?如何用unbind取消绑 ...
- 查看jquery绑定的事件函数
作为技术狂热分子的职业本能,看到一个技术产品的功能,总会忍不住想知道它是怎么被实现的.比如我每每看到别人网站一个很炫的界面或者很酷的功能,就忍不住打开了浏览器的控制台... 好,不扯远,说说当你想看到 ...
- Jquery EasyUI中treegrid的中右键菜单和一般按钮同时绑定事件时的怪异事件
做个项目使用jquery easyui来做前端,也许是对此不是很熟悉,总是发现一些不可理解的事件. 主要源代码如下: <script type="text/javascript&qu ...
- jQuery查看dom元素上绑定的事件列表
jQuery API提供了一种能够查看元素已绑定事件的列表,这个功能在进行功能调试的时候特别有用,尤其确定在代码执行过程中元素绑定的事件是否被更改. 1: jQuery( elem ).dat ...
- 使用jquery移除前面通过onclick绑定的元素的事件,然后重新绑定别的函数来执行onclick事件。
http://caibaojian.com/css3/experience/bugs.htm 使用jquery移除前面通过onclick绑定的元素的事件,然后重新绑定别的函数来执行onclick事件. ...
- jQuery实现回车绑定Tab事件
有时候我们希望回车事件绑定的是键盘的Tab事件.我的第一思路就是切换事件的keyCode,比如键盘事件按下的keyCode如果是13,我们将keyCode改为9.但是在实际编程中却未能实现此效果.于是 ...
随机推荐
- shell脚本中数组array常用技巧学习实践
shell中数组的下标默认是从0开始的 1.将字符串放在数组中,获取其长度 #!/bin/bashstr="a b --n d"array=($str)length=${#arra ...
- imagemagick imagick
imagemagick#图像处理软件 安装解压 ./configure make make install imagick#是php图像扩展模块 调用imagemagick处理图像 安装解压/opt/ ...
- JSBridge深度剖析
概述 做过混合开发的人都知道Ionic和PhoneGap之类的框架,这些框架在web基础上包装一层Native.然后通过Bridge技术的js调用本地的库. 在讲JSBridge技术之前.我们来看一下 ...
- java 设计模式 -- 责任链模式
设计模式 – 责任链模式 介绍: 责任链模式是一种动态行为模式,有多个对象,每一个对象分别拥有其下家的引用.连起来形成一条链.待处理对象则传到此链上,在此链进行传递,且待处理对象并不知道此会被链上的哪 ...
- cartographer Ubuntu16.04 ros环境配置
首先要正确安装 ROS ,然后第12步应注意,proto的版本是个关键容易出错. 1.添加ROS源http:/packages.ros.org/ros/ubuntu xenial main ( ...
- 【转】AngularJs 弹出框 model(模态框)
原文转至 http://blog.csdn.net/violet_day/article/details/17170585 $modal是一个可以迅速创建模态窗口的服务,创建部分页,控制器,并关联他们 ...
- [SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed (_ssl.c:661)
再用爬虫爬取数据的时候报错:[SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed (_ssl.c:661) 好多博客我看都说是:网站证书 ...
- python sax解析xml
#books.xml<catalog> <book isbn="0-596-00128-2"> <title>Python & XML& ...
- Linux下实现RAID
一.实验目的 1.掌握Linux系统下软RAID的实现方法: 2.掌握RAID5的配置过程: 3. 通过实验熟悉RAID.5的特点. 二.实验内容及步骤 1.在VMware中创建一台Linux. 2. ...
- Linux NAT网络连接权威指南
[1]准备工作,写在前面 1.1)检查服务(cmd>>services.msc,我用的是VM) 1.2)确保Vmnet8 连接处于启动状态 + 获取ipv4(ipv6)地址 (在网络连接不 ...