假设有元素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有对应的事件,为什么要重新绑定一下事件呢的更多相关文章

  1. JS与Jquery的事件委托——解决了绑定相同事件的问题

    概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完 ...

  2. jQuery的addClass,removeClass和toggleClass方法

    jQuery的addClass,removeClass和toggleClass方法,最后一个方法在某一情形之下,可以替代前面2个方法. 第一个方法addClass为元素添加一个class. 第二个方法 ...

  3. jQuery 绑定事件及移除绑定事件方法和元素事件列表

    1.jQuery Event 事件:      ready(fn); $(document).ready()注意在body中没有onload事件,否则该函数不能执行.在每个页面中可以有很多个函数被加载 ...

  4. jquery中取消和绑定hover事件的正确方式

    在网页设计中,我们经常使用jquery去响应鼠标的hover事件,和mouseover和mouseout事件有相同的效果,但是这其中其中如何使用bind去绑定hover方法呢?如何用unbind取消绑 ...

  5. 查看jquery绑定的事件函数

    作为技术狂热分子的职业本能,看到一个技术产品的功能,总会忍不住想知道它是怎么被实现的.比如我每每看到别人网站一个很炫的界面或者很酷的功能,就忍不住打开了浏览器的控制台... 好,不扯远,说说当你想看到 ...

  6. Jquery EasyUI中treegrid的中右键菜单和一般按钮同时绑定事件时的怪异事件

    做个项目使用jquery  easyui来做前端,也许是对此不是很熟悉,总是发现一些不可理解的事件. 主要源代码如下: <script type="text/javascript&qu ...

  7. jQuery查看dom元素上绑定的事件列表

        jQuery API提供了一种能够查看元素已绑定事件的列表,这个功能在进行功能调试的时候特别有用,尤其确定在代码执行过程中元素绑定的事件是否被更改. 1: jQuery( elem ).dat ...

  8. 使用jquery移除前面通过onclick绑定的元素的事件,然后重新绑定别的函数来执行onclick事件。

    http://caibaojian.com/css3/experience/bugs.htm 使用jquery移除前面通过onclick绑定的元素的事件,然后重新绑定别的函数来执行onclick事件. ...

  9. jQuery实现回车绑定Tab事件

    有时候我们希望回车事件绑定的是键盘的Tab事件.我的第一思路就是切换事件的keyCode,比如键盘事件按下的keyCode如果是13,我们将keyCode改为9.但是在实际编程中却未能实现此效果.于是 ...

随机推荐

  1. spring batch的使用和定时器Quart的使用

    Spring Batch是一个基于Spring的企业级批处理框架,它通过配合定时器Quartz来轻易实现大批量的数据读取或插入,并且全程自动化,无需人员管理. 在使用spring batch之前,得对 ...

  2. JVM —— 移除永久代

    近期准备生产环境 JDK 升级到 1.8,本地先升级了下,发现 -XX:PermSize 和 -XX:MaxPermSize 已经失效,取而代之的是一个新的区域 -- Metaspace(元数据区). ...

  3. (转)Spring对注解(Annotation)处理源码分析1——扫描和读取Bean定义

    1.从Spring2.0以后的版本中,Spring也引入了基于注解(Annotation)方式的配置,注解(Annotation)是JDK1.5中引入的一个新特性,用于简化Bean的配置,某些场合可以 ...

  4. bootcamp安装win7的详细步骤 (光盘安装)

      bootcamp安装win7的详细步骤 首先是要您确定以下内容(1)您的Mac系统下是一个盘符,也就是“macintosh hd”一个磁盘.如果不是的话,首先您需要做的是备份您分区下面的资料,让磁 ...

  5. DevOps企业实践与架构

    原文地址:http://www.sohu.com/a/112351816_355140 什么是DevOps及其误区 DevOps概念从2009年提出已有8个年头.可是在8年前的那个时候,为什么DevO ...

  6. Django之通过tag推荐文章

    #路由 views.py def post_detail(request,year,month,day,post): ''' 文章详情 + 评论详情 :param request: :param ye ...

  7. 软件工程第3次作业——Visual Studio 2017下针对代码覆盖率的C/C++单元测试

    本项目Github地址(同时包括两个作业项目): Assignment03 -- https://github.com/Oberon-Zheng/SoftwareEngineeringAssignme ...

  8. 玩转 eclipse:[2]代码重构

    Java 程序重构的目标就是进行全系统程序代码变更, 使得工程更符合常用设计思想,它不但不会影响程序的行为 ,反而使程序的结构更为清晰合理. Eclipse 提供一系列非常高效并且有易于重构程序代码的 ...

  9. javascript onclick中post提交

    对post提交进行封装: function post(URL, PARAMS) { var temp = document.createElement("form"); temp. ...

  10. 高复用率的RTSPClient组件EasyRTSPClient设计流程概述

    EasyRTSPClient 设计过程 概述 EasyRTSPClient 基于live555构建而成. 今天讲讲EasyRTSPClient的设计过程 EasyRTSPClient,主要包括以下部分 ...