假设有元素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. centos7 下编译ffmpeg

    下载包: wget https://ffmpeg.org/releases/ffmpeg-4.1.tar.gz GCC如果没有yasm: http://yasm.tortall.net/Downloa ...

  2. 2016.8.19 在dialog上增加一个button出现错误:failed to execute setAttribute on Element...

    目标:想要在dialog上多加一个button. 语法来自: http://api.jqueryui.com/dialog/#option-buttons   可见新增在dialog上的button要 ...

  3. C#读取资源文件的两种方法及保存资源文件到本地

    方法1 GetManifestResourceStream   VB.NET中资源的名称为:项目默认命名空间.资源文件名 C#中则是:项目命名空间.资源文件所在文件夹名.资源文件名 例如:istr = ...

  4. Win7如何解决内存不能为Read的批处理命令

    将下面文件保存为"解决内存不能为Read的批处理命令.cmd"双击运行即可   for %%1 in (%WinDir%\system32\*.dll) do regsvr32.e ...

  5. java web邮件收发

    1.网上方法要导入两个包 mail.jar&activation.jar package com.zjh.shopping.util; import java.util.Date; impor ...

  6. 8种移动APP导航设计模式对照

    当我们确定了移动APP的设计需求和APP产品设计流程之后,開始着手设计APP界面UI或是APP原型图啦.这个时候我们都要面临的第一个问题就是怎样将信息以最优的方式组合起来? 或许我们对照和了解了其它一 ...

  7. SharePoint 的PowerShell命令之获取所有网站模版

    Get-SPWebTemplate | select Name, Title

  8. containsKey使用方法

    作用是判断Map中是否有所需要的键值,下面是具体的代码: public static void main(String[] args) { Map<String, String> map ...

  9. 10个经典Java面试题

    1.Java的HashMap是怎样工作的? HashMap是一个针对数据结构的键值.每一个键都会有对应的值.关键是识别这种值. HashMap 基于 hashing 原理,我们通过 put ()和 g ...

  10. Go 语言从新手到大神:每个人都会踩的五十个坑(转)

    Go语言是一个简单却蕴含深意的语言.但是,即便号称是最简单的C语言,都能总结出一本<C陷阱与缺陷>,更何况Go语言呢.Go语言中的许多坑其实并不是因为Go自身的问题.一些错误你再别的语言中 ...