$().click(function(){}) 不管用 live()替代品 append之后
根据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
随机推荐
- Android LitePal 神一般的数据库框架 超级好用
参考: Android数据库高手秘籍(一)--SQLite命令 Android数据库高手秘籍(二)--创建表和LitePal的基本用法 Android数据库高手秘籍(三)--使用LitePal升级表 ...
- ubuntu中 不同JDK版本之间的切换
Ubuntu中JDK 的切换前提是同时安装了多个版本,如jdk7和jdk8,若要切换,在终端输入: sudo update-alternatives --config java sudo update ...
- hosts manager——hosts配置管理工具
引言 做web开发相关的经常会用到hosts修改的功能,各个平台好像都有hosts 配置GUI(据我所知windows有.MAC OX也有),但是命令行配置hosts的好像还没有,命令行配置的话有几个 ...
- Beta阶段第二次Scrum Meeting
此文章已于 2:51:42 2016/12/8 重新发布到 buaa_overwatch Beta阶段第二次Scrum Meeting 情况简述 BETA阶段第二次Scrum Meeting 敏捷开发 ...
- 浅谈:深入理解struts2的流程已经spring和struts2的整合
第一步:在tomcat启动的时候 1.在tomcat启动的时候,首先会加载struts2的核心过滤器StrutsPrepareAndExecuteFilter <filter> <f ...
- 使用.NET实现断点续传
http://www.cnblogs.com/goody9807/archive/2007/06/05/772501.html 断点续传的原理在了解HTTP断点续传的原理之前,先来说说HTTP协议,H ...
- JQuery中$.ajax()方法参数详解(转载)
url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 ...
- Angular.js实现折叠按钮的经典指令.
var expanderModule=angular.module('expanderModule',[]) expanderModule.directive('expander',function( ...
- Effective java读书笔记
2015年进步很小,看的书也不是很多,感觉自己都要废了,2016是沉淀的一年,在这一年中要不断学习.看书,努力提升自己 计在16年要看12本书,主要涉及java基础.Spring研究.java并发.J ...
- Maven总结
项目管理构建工具:maven ant gradle == 项目管理利器(Maven)——maven介绍及环境搭建maven可以帮助我们更有效地管理项目,它也是一套强大的自动化构建工具,覆盖了编译.测试 ...