$().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
随机推荐
- Dedecms去掉URL中a目录的方法
本文实例讲述了Dedecms去掉URL中a目录的方法.分享给大家,供大家参考.具体分析如下: 使用dedecms的朋友可能会发现自己的URL目录生成是会自动带有一个/A/目录了,那么要如何去掉URL中 ...
- 使用Swift打造动态库SDK和DemoAPP时所遇到的(Xcode7.3)
使用Swift开发SDK的优点是,生成的SDK对于Obj-C或是Swift调用都不需要自己去建桥接文件,因为Swift的SDK打包时默认已经自动生成供OC调用的.h文件.OC调用时直接import,s ...
- RabbitMQ 参数们的Power “续”
参数中的 arguments 之前讲参数的一些作用的时候,忽略了最后一个字典类型的参数,因为这个参数是大有文章的,值得单独进出来说道说道. 这时,就不得不打开我们的 Web UI管理系统了,可以看到在 ...
- js cookie 数组 存读
自己研究了一下. "Cookie里面只能放String 类型" 所以只能将arr的数据按照自己的约定转成string格式存进cookie. 这里提示一下cookie是存在本地浏览器 ...
- HTML5 开发框架
WeUI WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一.包含button.cell.dialog. progress ...
- 使用css打造形形色色的形状!
使用css打造形形色色的形状! css是非常强大的工具,如果我们掌握的好,那么许多复杂的形状不需要使用图片而直接使用css完成即可,这不仅有利于减少http请求以增强性能还便于日后的管理和维护,一举两 ...
- HTTP Content-type 对照表
Application Type 文件扩展名 Content-Type(Mime-Type) 描述 . application/x- .* application/octet-stream 二进制 ...
- Linux ip
工具/原料 linux系统 putty 方法/步骤 Linux下查看IP一般都是用命令在终端查看了,使用命令行来进行查看. 想要在图形界面查看的朋友也有办法,不过就比较复杂,不如一条命令来得痛 ...
- php操作mongodb
<?php set_time_limit(0); $mongo = new Mongo('192.168.33.50:27017'); //连接远程主机22011端口 $db = $mongo- ...
- 【类库】容器对象(List、DataTable、 DataView、Dictionary)
首先申明一下,写此博文的目的是纪录一下,知识都是现成的,只是整理一下,为了让自己更容易看懂,比在其他地方更容易明白.因为它们太常用了,不忍心每次都去用那么长的时间查看MSDN,希望能在这里用理少的时间 ...