前言

最近一个项目的前端有这样的一个需求:页面中有某按钮,点击按钮之后通过服务器的返回信息更改这个按钮的点击事件执行函数。

方案1

之前小猪使用的方法是给按钮增加class。在jquery中通过class查找到之后使用click增加函数功能

$(".class1").click(function(){
$(this).removeClass("class1");
$(this).addClass("class2");
});

这样的代码是实现了样式上的变化。但是虽然样式变化了(class1=>class2),但是再次点击该按钮时执行的还是缺是执行了,class1的函数。

到此,此方案不可行。

方案2:

小猪之前知道给函数增加时间jQuery不仅提供了方案一的方法,还有bind方法

bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。

$(".class1").bind("click".function(){
$(this).removeClass("class1");
$(this).addClass("class2");
});

小猪自信满满的准备看到期待的结果。。

可是~~~。。。。。。

看来bind方法和直接使用click的效果是一样的。

方案3:

使用live()方法:

live() 方法为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

语法:

$(selector).live(event,data,function)

通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)。这不是正是我想要的嘛!

$(".class1").live("click".function(){
$(this).removeClass("class1");
$(this).addClass("class2");
});

这样,在改变了其样式的同时也改变了其运行的函数。

.live()总结

live与bind和直接添加不同,我的理解就是一个监听事件在冒泡阶段,一个监听事件在执行阶段(不知jQuery怎么在捕获阶段监听事件)。

.live() 方法能对一个还没有添加进DOM的元素有效,是由于使用了事件委托:绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。传递给 .live() 的事件处理函数不会绑定在元素上,而是把他作为一个特殊的事件处理函数,绑定在 DOM 树的根节点上。

如下面的例子:

$('.clickme').live('click', function() { alert("Live handler called."); });

然后再添加一个新元素:

$('body').append('<div class="clickme">Another target</div>');

然后再点击新增的元素,他依然能够触发事件处理函数。

在我们的例子中,当点击新的元素后,会依次发生下列步骤:

  1. 生成一个click事件传递给来处理
  2. 由于没有事件处理函数直接绑定在 <divgt; 上,所以事件冒泡到DOM树上
  3. 事件不断冒泡一直到DOM树的根节点,默认情况下上面绑定了这个特殊的事件处理函数。
  4. 执行由 .live() 绑定的特殊的 click 事件处理函数。
  5. 这个事件处理函数首先检测事件对象的 target 来确定是不是需要继续。这个测试是通过检测 $(event.target).closest('.clickme') 能否找到匹配的元素来实现的。
  6. 如果找到了匹配的元素,那么调用原始的事件处理函数。

由于只有在事件发生时才会在上面的第五步里做测试,因此在任何时候添加的元素都能够响应这个事件。

附加说明

  • .live() 虽然很有用,但由于其特殊的实现方式,所以不能简单的在任何情况下替换 .bind()。主要的不同有:
  • 在jQuery 1.4中,.live()方法支持自定义事件,也支持所有的 JavaScript 事件。在jQuery 1.4.1中,甚至也支持 focus 和 blue 事件了(映射到更合适,并且可以冒泡的focusin和focusout上)。另外,在jQuery 1.4.1中,也能支持hover(映射到"mouseenter mouseleave")。然而在jQuery 1.3.x中,只支持支持的JavaScript事件和自定义事件:click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, 和 mouseup.
  • .live() 并不完全支持通过DOM遍历的方法找到的元素。取而代之的是,应当总是在一个选择器后面直接使用 .live() 方法,正如前面例子里提到的。
  • 当一个事件处理函数用 .live() 绑定后,要停止执行其他的事件处理函数,那么这个函数必须返回 false。 仅仅调用 .stopPropagation() 无法实现这个目的。

jQuery的bind()与live()的更多相关文章

  1. jquery的bind跟on绑定事件的区别

    jquery的bind跟on绑定事件的区别:主要是事件冒泡: jquery文档中bind和on函数绑定事件的用法: .bind(events [,eventData], handler) .on(ev ...

  2. jQuery的.bind()、.live()和.delegate()的区别

    参考:http://kb.cnblogs.com/page/94469/ 摘要:jQuery的.bind()..live()和.delegate()之间的区别并非总是那么明显的,然而,如果我们对所有的 ...

  3. jQuery的.bind()、.live()和.delegate()之间区别

    摘要:jQuery的.bind()..live()和.delegate()之间的区别并非总是那么明显的,然而,如果我们对所有的不同之处都有清晰的理解的话,那么这将会有助于我们编写出更加简洁的代码,以及 ...

  4. jQuery中bind方法和live方法区别解析

    Javascript中的事件有它的独特性,有默认的执行事件,例如冒泡就是其中的一个.在很多比较复杂的应用程序中,停止事件的冒泡或捕获在程序开发当中是十分有用的,而在IE中有它的独特方式来阻止事件的冒泡 ...

  5. js的onclick和jquery的bind事件执行先后顺序

    近期在项目中为每一个ajax触发按钮写正在加载的效果,用的是bootstarp 代码如下 $(function(){ $('.btn').bind('click',function(e){ var $ ...

  6. JQuery中bind和unbind函数与onclick绑定事件区分

    JQuery中bind和unbind函数转载:   https://blog.csdn.net/liucheng417/article/details/51131982 页面代码: <body& ...

  7. Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解

    简介 最近了解到很多网页开发者对jquery中的 .bind() .live() .delegate() 和 .on() 方法存在很多的疑惑.这些疑惑通常是关于它们之间真正的区别是什么啊,什么时候该使 ...

  8. jquery 动态绑定bind()及模拟鼠标点击A链接

    近来自觉前端有小小进步,幸而记之. 1.两个 css class 紧挨在一起 则在html元素中,要同时拥有这两个class,才能起作用 .block.db{ background-image:url ...

  9. jQuery 中bind(),live(),delegate(),on() 区别(转)

    当我们试图绑定一些事件到DOM元素上的时候,我相信上面这4个方法是最常用的.而它们之间到底有什么不同呢?在什么场合下用什么方法是最有效的呢? 准备知识: 当我们在开始的时候,有些知识是必须具备的: D ...

  10. 转 jQuery 中bind(),live(),delegate(),on() 区别

    当我们试图绑定一些事件到DOM元素上的时候,我相信上面这4个方法是最常用的.而它们之间到底有什么不同呢?在什么场合下用什么方法是最有效的呢? 准备知识: 当我们在开始的时候,有些知识是必须具备的: D ...

随机推荐

  1. hibernate对象关系实现(四)继承实现

    继承实现方式分为三种:subclass; joined-subclass;union-subclass a.类中体现   b.库中体现分为三种: b.1:一种方式:人和学生公用一张表,添加一个辨别字段 ...

  2. adb_常用命令

    1. adb push  电脑中的文件(包含路径)  Android中的绝对路径 2. adb pull  Android中的绝对路径文件  电脑中的绝对路径 3. adb install ??.ap ...

  3. curl的简单使用

    <?php namespace Home\Controller; use Think\Controller; class IndexController extends Controller { ...

  4. Java Ant build.xml详解

    1,什么是antant是构建工具2,什么是构建概念到处可查到,形象来说,你要把代码从某个地方拿来,编译,再拷贝到某个地方去等等操作,当然不仅与此,但是主要用来干这个3,ant的好处跨平台   --因为 ...

  5. 转:从开源项目学习 C 语言基本的编码规则

    从开源项目学习 C 语言基本的编码规则 每个项目都有自己的风格指南:一组有关怎样为那个项目编码约定.一些经理选择基本的编码规则,另一些经理则更偏好非常高级的规则,对许多项目而言则没有特定的编码规则,项 ...

  6. Eclipse下导入外部jar包的3种方式 (zhuan)

    http://blog.csdn.net/mazhaojuan/article/details/21403717 ******************************************* ...

  7. hiho_1139_二分+bfs搜索

    题目 给定N个点和M条边,从点1出发,到达点T.寻找路径上边的个数小于等于K的路径,求出所有满足条件的路径中最长边长度的最小值. 题目链接:二分     最小化最大值,考虑采用二分搜索.对所有的边长进 ...

  8. java 集合2(迭代器)

    迭代器方法:(把迭代器想象成抓娃娃机的爪子) hasNext()     问是否有元素可遍历,如果有元素可以遍历,返回true,否则返回false 工作原理:这一个迭代的过程是这样的,获取到迭代器时候 ...

  9. unity入门笔记

    我于2010年4月1日硕士毕业加入完美时空, 至今5年整.刚刚从一家公司的微端(就是端游技术+页游思想, 具体点就是c++开发, directX渲染, 资源采取所需才会下载)项目的前端主程职位离职, ...

  10. html+asp.net上传文件

    type="file" 的name以及id一定要写,并且名字相同 http://niunan.iteye.com/blog/479605 <form id="for ...