根据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>&nbsp;</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的使用注意事项的更多相关文章

  1. mousewheel事件的兼容方法

    在垂直方向上滚动页面时,会触发mousewheel事件,这个事件会在任何元素上触发,最终都会冒泡到document(IE8)或window(IE9+及其他主流现代浏览器)对象. 在给元素指定mouse ...

  2. iOS中的过期方法和新的替代方法

    关于iOS中的过期方法和新的替代方法 1.获取某些类的UINavigationBar的统一外观并设置UINavigationbar的背景 注:方法名改了但是基本使用方法不变 + (instancety ...

  3. jQuery绑定以及解除时间方法总结,以及事件触发的方法

     一   off()和on()          $("obj").on(event,[sesect],[data],fn);一般情况下参数只有两个,事件以及事件的处理函数     ...

  4. 给ul中的li添加事件的多种方法

    给ul中的li添加事件的多种方法 这是一个常见,而且典型的前端面试题 <ul> <li>11111</li> <li>22222</li> ...

  5. spring替代方法

    总结spring替代方法的使用 MyValueCalculator类中的computerValue方法将会被替代 public class MyValueCalculator { public Str ...

  6. JQ绑定事件(1.9已经废除了live()等绑定事件方法,on()方法是官方推荐的绑定事件的一个方法)

    本文来源:http://www.cnblogs.com/leejersey/p/3545372.html jQuery on()方法是官方推荐的绑定事件的一个方法. $(selector).on(ev ...

  7. Windows Server 2008中关闭事件跟踪程序的方法

    Windows Server 2008跟Windows Server 2003一样,在关机的时候会弹出一个“关闭事件跟踪程序”窗口,当然微软这么做是处于安全的考虑啦,但是如果我们只是个人用用的话,那就 ...

  8. jQuery-委托事件和on方法注册事件

    delegate注册委托事件 delegate--代理.委托 事件代理----事件最终不是由$("#first")执行,它只是代理元素 第一个参数:最终发生事件的元素 第二个参数: ...

  9. Android中getDrawable和getColor过时的替代方法

    版权声明:本文为博主原创文章,未经博主允许不得转载. 前言 Android SDK 升级到 23 之后,getDrawable和getColor方法提示过时. 解决方案 getResources(). ...

随机推荐

  1. (转)eclipse安装jetty

    背景:在项目开发的过程中,一个老的项目使用的是jetty启动,在用tomcat启动的过程中出现了启动不了的异常,浪费了好多时间.因为项目一直是用jetty启动的,为了不浪费时间,也只好改变思路选择je ...

  2. (转)Synchronized(对象锁)和Static Synchronized(类锁)的区别

    场景:面试的时候经常用得到! 1 综述 Synchronized和Static Synchronized区别 一个是实例锁(锁在某一个实例对象上,如果该类是单例,那么该锁也具有全局锁的概念),一个是全 ...

  3. 用css3的cursor:zoom-in/zoom-out实现微博看图片放大镜效果

    1.前言 CSS3的出现解决了很多让人头疼的问题,至少我想很多童鞋都这样认为.css3的cursor属性大家用的应该是非常的多的,我想用的比较多的像cursor:pointer;cursor:help ...

  4. Angular4.0学习笔记 从入门到实战打造在线竞拍网站学习笔记之二--路由

    Angular4.0基础知识见上一篇博客 路由 简介 接下来学习路由的相关知识 本来是不准备写下去的,因为当时看视频学的时候感觉自己掌握的不错 ( 这是一个灰常不好的想法 ) ,过了一段时间才发现An ...

  5. 办公楼[POI2007]

    题目描述 FGD开办了一家电话公司.他雇用了N个职员,给了每个职员一部手机.每个职员的手机里都存储有一些同事的电话号码.由于FGD的公司规模不断扩大,旧的办公楼已经显得十分狭窄,FGD决定将公司迁至一 ...

  6. Apache安装编译遇到APR的问题

    http://mirrors.tuna.tsinghua.edu.cn/apache//httpd/httpd-2.4.27.tar.bz2Apache下载链接 在解压Apache源码包进入目录运行 ...

  7. Android融合推送MixPush SDK集成多家推送平台,共享系统级推送,杀死APP也能收到推送

    消息推送是App运营的重要一环,为了优化消息推送成功率,降低电量和流量消耗,系统级的推送服务显得尤为重要.小米和魅族由此推出了自家的推送平台,在MIUI和Flyme上共享系统级推送服务,让APP在被杀 ...

  8. 用户单独管理Jenkins的某些项目

    管理用户: 建立用户: 安装Role-Based Strategy插件 安装插件后,进入系统设置页面,配置如下: 在系统管理页面点击Manage and Assign Roles进入角色管理页面: 1 ...

  9. Coursera scala课程第一周答案

    Exercise 1: Pascal's Triangle The following pattern of numbers is called Pascal's triangle. 1 1 1 1 ...

  10. opencv 基本绘图函数

    opencv 常用的数据结构和函数 颜色空间转换函数 cvtColor 函数 cvtColor 函数是opencv 中的颜色空间转换函数.可以实现rgb向hsv hsi等颜色空间的转换,也可以转换成灰 ...