根据jQuery的官方描述,live方法在1.7中已经不建议使用,在1.9中删除了这个方法。并建议在以后的代码中使用on方法来替代。
  on方法可以接受三个参数:事件名、触发选择器、事件函数。

需要特别注意的是:on方法中间的这个触发选择器就是你将要添加的HTML元素的类名、id或者元素名,使用它就可以实现live的效果。

例如我的html文档中已经有了一个id为parent的div,我将要在这个div内部再动态添加一个class为son的span,然后我为这个span绑定一个事件,那么我需要这样写:

$('#parent').on('click','.son',function(){alert('test')});

这个触发选择器实际上就是在 JQ内部判断了一次事件参数的$(e.target).is(selector),只有触发对象匹配触发选择器才会触发。这是利用了事件冒泡的机制来完成 的,原本的live也是使用冒泡机制所以既然on可以实现那么live也就没有存在的必要了,只不过为了兼容让它从1.7苟延残喘的活到了1.9而已。
  这篇文章也没啥内容了,接下来就用这个功能做点有意义的事情示范下吧~ 在低版本IE中A标签在鼠标按下时候会出现虚线边框,这是由focus造成的。我们只要在全局事件中做点手脚就能解决这个问题。在现代浏览器中focus是不冒泡的,但是低版本浏览器中可以冒泡。所以对于低版本浏览器中对focus使用live是有效的。在jQuery1.9之前的版本我们可以这样写:

$("a").live("focus",function(){
this.blur();
});

jQuery1.9之后由于live被删除了,所以应该这样写:

$(document).on("focus","a",function(){
this.blur();
});

还要注意个问题,如果是从live的写法换成on的写法别忘了调整调用链。因为live的返回值是事件触发的对象,而使用on则是在容器对象上。

//jQuery1.9-
$("#panel").find("div").live("click",function(){
alert("x");
}).addClass("x"); //jQuery1.9+
$("#panel").on("click","div",function(){
alert("x");
}).find("div").addClass("x");   

注意最后的find("div"),其它就没什么问题了。下面是官方说明
  http://jquery.com/upgrade-guide/1.9/#live-removed

随机推荐

  1. jQuery datatables

    jQuery datatables 属性,用例 参考:http://datatables.club/example/ http://blog.csdn.net/mickey_miki/article/ ...

  2. Google Map API V3开发(3)

    Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...

  3. rpm---linux软件安装与管理

    linux的安装命令选项太多,整理一下,方便后期查找. 汇总: install: rpm -ivh 包全名 安装 upgrade: rpm -Uvh 包全名 升级 erase: rpm -e 包名 删 ...

  4. 微博RPC框架motan入门笔记

    Motan 是一套高性能.易于使用的分布式远程服务调用(RPC)框架. 功能 支持通过spring配置方式集成,无需额外编写代码即可为服务提供分布式调用能力. 支持集成consul.zookeeper ...

  5. todoList使用教程

    网页链接:http://www.cnblogs.com/sunada2005/articles/2663030.html

  6. 几款开源ESB总线的比较

    现有的开源ESB总线中,自从2003年第一个开源总线Mule出现后,现在已经是百花争鸣的景象了.现在我就对现有的各种开源ESB总线依据性能.可扩展性.资料文档完整程度以及整合难易程度等方面展开. CX ...

  7. IT 外包中的甲方乙方,德国人,美国人,印度人和日本人印象杂谈

    开篇介绍 最近经常和朋友聚会,三十而立的年龄自然讨论最多的就是各自的小家庭,如何赚钱,工作,未来的就业发展,职业转型等话题.还有各种跳槽,机会选择,甲方乙方以及外包中的各种趣事,外企与国内私企的发展机 ...

  8. [Network] HTML、XML和JSON学习汇总

    写在前面:楼主也是刚刚接触这方面的知识,之前完全是零基础,后来经朋友推荐了几个不错的博文,看完以后豁然开朗.但是此博文更加偏重于基础知识介绍(其实更深的楼主也还不了解,这方面的大神请绕道),只是分享个 ...

  9. D3.js学习记录

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. php万年历

    最近学习php循环.日期显示.GET方式请求,进而实现了一个小程序. 直接上代码: <?php header("Content-type:text/html; charset=UTF- ...