live事件的替代方法on的使用注意事项
根据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而已。
贴一个小项目的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>会员信息模块</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<style type="text/css">
* {
font-size: 12px;
} tr {
text-align: center;
height: 40px;
}
</style> </head>
<body>
<table width="800" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#EBE7DC">
<td><input type="checkbox"/></td>
<td>姓名</td>
<td>性别</td>
<td>卡号</td>
<td>会员级别</td>
<td>电话号码</td>
<td>出生年月日</td>
<td>消费金额</td>
<td> </td>
</tr>
<tr bgcolor="#FAF3E9">
<td><input type="checkbox"/></td>
<td>张三</td>
<td>男</td>
<td>6565654315321321</td>
<td>短工</td>
<td>18625455412</td>
<td>1995-12-09</td>
<td>10,000.00</td>
<td><img class='add' src="data:images/add.jpg"/> <img class='del' src="data:images/del.jpg"/></td>
</tr>
<tr bgcolor="#FEFAF7">
<td><input type="checkbox"/></td>
<td>张三</td>
<td>男</td>
<td>6565654315321321</td>
<td>短工</td>
<td>18625455412</td>
<td>1995-12-09</td>
<td>10,000.00</td>
<td><img class='add' src="data:images/add.jpg"/> <img class='del' src="data:images/del.jpg"/></td>
</tr>
<tr bgcolor="#FAF3E9">
<td><input type="checkbox"/></td>
<td>张三</td>
<td>男</td>
<td>6565654315321321</td>
<td>短工</td>
<td>18625455412</td>
<td>1995-12-09</td>
<td>10,000.00</td>
<td><img class='add' src="data:images/add.jpg"/> <img class='del' src="data:images/del.jpg"/></td>
</tr>
</table>
<a href="#" class='newone'>新增</a>
<script>
//动态添加行用on,不能用动态的tr，要用原来存在的元素去取值
$("table").on("click",".del",function () {
$(this).parents("tr").remove();
})
$(".newone").click(function () {
$("table").append('<tr bgcolor="#FAF3E9">'
+ ' <td><input type="checkbox"/></td>'
+ ' <td>张三</td>'
+ ' <td>男</td>'
+ ' <td>6565654315321321</td>'
+ ' <td>短工</td>'
+ ' <td>18625455412</td>'
+ ' <td>1995-12-09</td>'
+ ' <td>10,000.00</td>'
+ ' <td>'
+ ' <img class=\'add\' src="data:images/add.jpg" />'
+ ' <img class=\'del\' src="data:images/del.jpg" />'
+ ' </td>'
+ ' </tr>')
}
)
</script>
</body>
</html>
live事件的替代方法on的使用注意事项的更多相关文章
- mousewheel事件的兼容方法
在垂直方向上滚动页面时,会触发mousewheel事件,这个事件会在任何元素上触发,最终都会冒泡到document(IE8)或window(IE9+及其他主流现代浏览器)对象. 在给元素指定mouse ...
- iOS中的过期方法和新的替代方法
关于iOS中的过期方法和新的替代方法 1.获取某些类的UINavigationBar的统一外观并设置UINavigationbar的背景 注:方法名改了但是基本使用方法不变 + (instancety ...
- jQuery绑定以及解除时间方法总结，以及事件触发的方法
一 off()和on() $("obj").on(event,[sesect],[data],fn);一般情况下参数只有两个,事件以及事件的处理函数 ...
- 给ul中的li添加事件的多种方法
给ul中的li添加事件的多种方法 这是一个常见,而且典型的前端面试题 <ul> <li>11111</li> <li>22222</li> ...
- spring替代方法
总结spring替代方法的使用 MyValueCalculator类中的computerValue方法将会被替代 public class MyValueCalculator { public Str ...
- JQ绑定事件（1.9已经废除了live()等绑定事件方法，on()方法是官方推荐的绑定事件的一个方法）
本文来源:http://www.cnblogs.com/leejersey/p/3545372.html jQuery on()方法是官方推荐的绑定事件的一个方法. $(selector).on(ev ...
- Windows Server 2008中关闭事件跟踪程序的方法
Windows Server 2008跟Windows Server 2003一样,在关机的时候会弹出一个“关闭事件跟踪程序”窗口,当然微软这么做是处于安全的考虑啦,但是如果我们只是个人用用的话,那就 ...
- jQuery-委托事件和on方法注册事件
delegate注册委托事件 delegate--代理.委托 事件代理----事件最终不是由$("#first")执行,它只是代理元素 第一个参数:最终发生事件的元素 第二个参数: ...
- Android中getDrawable和getColor过时的替代方法
版权声明:本文为博主原创文章,未经博主允许不得转载. 前言 Android SDK 升级到 23 之后,getDrawable和getColor方法提示过时. 解决方案 getResources(). ...
随机推荐
- css3关键帧动画实现轮播效果
实现效果:打开手机京东,可以看到首页的头部,以这个头部为基础,仿写一个类似的样式. 思路:仔细观察可以发现,手机京东的头部是以一个搜索栏和轮播特效组成的,而这个搜索栏是以轮播特效做为背景的,现在运用c ...
- Linux 服务器如何配置网站以及绑定域名
因为域名没有备案,国内地区不能直接域名访问.前段时间在阿里云租购了一台的香港服务器,添加子域名时解析的时发现不能添加直接解析至端口,找了些资料,发现了Nginx绑定域名的方法,在这里做个记录. 1.香 ...
- JavaSE（五）JAVA对象向上转型和向下转型
今天做了一个测试的题目,发现自己还是很多问题没有静下心来做.很多问题是可以自己解决的但是自己一是没有读清题意,二是自己心里太急躁了.所以这个要自己应以为鉴! 对象的转型问题其实并不复杂,我们记住一句话 ...
- java_AWT常用组件
Button:按钮,可接受单击操作. Canvas:用于绘图的画布. Checkbox:复选框组件(也可以变成单选框组件). CheckboxGroup:用于将多个Checkbox组件合成一组,一组C ...
- ddos攻击和cc攻击的区别和防护！！
什么是DDoS攻击? DDoS攻击就是分布式的拒绝服务攻击,DDoS攻击手段是在传统的DoS攻击基础之上产生的一类攻击方式.单一的DoS攻击一般是采用一对一方式的,随着计算机与网络技术的发展,DoS攻 ...
- LVS-负载均衡集群部署
简介:LVS是一种集群技术,采用IP负载均衡技术和基于内容请求分发技术,调度器具有很好的吞吐量,将请求均衡的转移到不同服务器上执行,且调度器自动屏蔽掉服务器的故障,从而将一组服务器构成一个高性能,高可 ...
- Koa框架教程,Koa框架开发指南,Koa框架中文使用手册,Koa框架中文文档
我的博客:CODE大全:www.codedq.net:业余草:www.xttblog.com:爱分享:www.ndislwf.com或ifxvn.com. Koa -- 基于 Node.js 平台的下 ...
- 让你的Dapper像EF一样调用 开源~!
什么是Dapper? Dapper是一款轻量级的ORM框架,大名鼎鼎! 由谷歌Google 开发,在N款orm框架中 效率是最快的 最高的! 经过数据测试 比EF快 12-20 倍 国外最大的技术网站 ...
- Java的代码风格
1.Java文件的命名规则: . JAVA源文件的命名 JAVA源文件名必须和源文件中所定义的类的类名相同. 2. Package的命名 Package名的第一部分应是小写ASCII字符,并且是顶级域 ...
- angular学习（一）-- Expression
1.1 表达式:Expression 在AngularJS中,表达式是一种类似于模板引擎的语法, 可以在书写的位置 "输出" 数据. 基本使用 表达式写在双大括号内:{{ expr ...