前言

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

方案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. asp.netMVC中,视图层和控制器层的传值

    Asp.Net Mvc 控制器与视图的数据传递 摘要:本文将讨论asp.net mvc框架中的数据传递. 数据传递也就是控制器和视图之间的交互,比如在视图中提交的数据,在控制器怎么获取,或者控制器从业 ...

  2. struts2 if标签示例

    下面总结一下struts2 中if标签的使用 (1)判断字符串是否为空 <s:if test="user.username==null or user.username==''&quo ...

  3. mysql概要(十四)索引(补充:外键级联操作)

    [ ON DELETE { NO ACTION | CASCADE | SET NULL | SET DEFAULT } ][ ON UPDATE { NO ACTION | CASCADE | SE ...

  4. oracle linux 下卸载

    1. 关闭数据库 shutdown immeidate 2. 停止 Listener lsnrctl stop 3. 停止http服务(可选) service httpd stop 4. 用su或者重 ...

  5. 百度编辑器Ueditor的简单调用

    先去ueditou.baidu.com网站下载百度编辑器,放到项目根目录下的Data目录中,然后引入文件 <!DOCTYPE html> <html lang="en&qu ...

  6. numpy库的常用知识

    为什么有numpy这个库呢?准安装的Python中用列表(list)保存一组值,可以用来当作数组使用,不过由于列表的元素可以是任何对象,因此列表中所保存的是对象的指针.这样为了保存一个简单的[1,2, ...

  7. hdu 4870 Rating

    题目链接:hdu 4870 这题应该算是概率 dp 吧,刚开始看了好几个博客都一头雾水,总有些细节理不清楚,后来看了 hdu 4870 Rating (概率dp) 这篇博客终于有如醍醐灌顶,就好像是第 ...

  8. golang 定时器

    上网查了下相关资料,基本上都介绍的是github.com\robfig\cron这个包来执行定时任务,试了下确实可以执行.但是此包下没有删 除任务的方法,只有暂停的方法(Stop),若要停止之前的任务 ...

  9. java 生成随机数

    本段代码是生成的六位随机数.也可修改生成任意位随机数. int[] array = {0,1,2,3,4,5,6,7,8,9}; Random rand = new Random(); for (in ...

  10. iOS开发 判断字符串是不是网址

    - (BOOL)isUrlString { NSString *emailRegex = @"[a-zA-z]+://.*"; NSPredicate *emailTest = [ ...