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.但是在实际编程中却未能实现此效果.于是 ...
随机推荐
- 本地搭建Hadoop伪分布式环境之四:开启搭建Hadoop2.4.0之旅
1.准备软件 64位下载包下载: hadoop-2.4.0-64bit.tar.gz 百度网盘: 链接: http://pan.baidu.com/s/1hqEDe2S password: ...
- 每天学点Python之bytes
每天学点Python之bytes Python中的字节码用b'xxx'的形式表示.x能够用字符表示,也能够用ASCII编码形式\xnn表示.nn从00-ff(十六进制)共256种字符. 基本操作 以下 ...
- servlet实现文件下载所需步骤及说明
servlet实现文件下载所需步骤及说明 CreateTime--2017年9月1日15:46:22 Author:Marydon 参考链接:http://blog.sina.com.cn/s/b ...
- 【Excle数据透透视表】如何删除数据透视表
选中区域A4:C17,在键盘上按DELETE键删除,结果提示: 那么如何删除呢? 解决方案 选中整个数透视表,再删除 具体操作: 选中整个数据透视表→DELETE 注意:删除之后,源数据不会受到影响
- java 中的CountDownLatch
直接使用thread可以使用thread和wait notify 实现顺序执行 线程池中可以使用CountDownLatch 进行顺序执行 package com.test; import java. ...
- 30天自制操作系统(二)汇编语言学习与Makefile入门
1 介绍文本编辑器 这部分可直接略过 2 继续开发 helloos.nas中核心程序之前的内容和启动区以外的内容先不讲了,因为还涉及到一些软盘方面的知识. 然后来讲的是helloos.nas这个文件 ...
- Jenkins--Run shell command in jenkins as root user?
You need to modify the permission for jenkins user so that you can run the shell commands. You can i ...
- mac下spark单机环境配置笔记
1.安装scala 从http://www.scala-lang.org下载scala-2.11.7.tgz并解压缩 将解压缩的文件夹用mv指令移动到/usr/local/share mv [scal ...
- windows下MySQL 5.7+ 解压缩版安装配置方法(转,写的很简单精辟 赞)
方法来自伟大的互联网. 1.去官网下载.zip格式的MySQL Server的压缩包,根据需要选择x86或x64版.注意:下载是需要注册账户并登录的. 2.解压缩至你想要的位置. 3.复制解压目录下m ...
- 短信计时器Utils
package com.lvshandian.partylive.utils; import android.content.Context;import android.os.CountDownTi ...