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

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

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

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

这个触发选择器实际上就是在 JQ内部判断了一次事件参数的$(e.target).is(selector)，只有触发对象匹配触发选择器才会触发。这是利用了事件冒泡的机制来完成 的，原本的live也是使用冒泡机制所以既然on可以实现那么live也就没有存在的必要了，只不过为了兼容让它从1.7苟延残喘的活到了1.9而已。

  1. 贴一个小项目的代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6.     <title>会员信息模块</title>
  7.     <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
  8.     <style type="text/css">
  9.         * {
  10.             font-size: 12px;
  11.         }
  12.  
  13.         tr {
  14.             text-align: center;
  15.             height: 40px;
  16.         }
  17.     </style>
  18.  
  19. </head>
  20. <body>
  21. <table width="800" border="0" cellspacing="0" cellpadding="0">
  22.     <tr bgcolor="#EBE7DC">
  23.         <td><input type="checkbox"/></td>
  24.         <td>姓名</td>
  25.         <td>性别</td>
  26.         <td>卡号</td>
  27.         <td>会员级别</td>
  28.         <td>电话号码</td>
  29.         <td>出生年月日</td>
  30.         <td>消费金额</td>
  31.         <td>&nbsp;</td>
  32.     </tr>
  33.     <tr bgcolor="#FAF3E9">
  34.         <td><input type="checkbox"/></td>
  35.         <td>张三</td>
  36.         <td>男</td>
  37.         <td>6565654315321321</td>
  38.         <td>短工</td>
  39.         <td>18625455412</td>
  40.         <td>1995-12-09</td>
  41.         <td>10,000.00</td>
  42.         <td><img class='add' src="data:images/add.jpg"/> <img class='del' src="data:images/del.jpg"/></td>
  43.     </tr>
  44.     <tr bgcolor="#FEFAF7">
  45.         <td><input type="checkbox"/></td>
  46.         <td>张三</td>
  47.         <td>男</td>
  48.         <td>6565654315321321</td>
  49.         <td>短工</td>
  50.         <td>18625455412</td>
  51.         <td>1995-12-09</td>
  52.         <td>10,000.00</td>
  53.         <td><img class='add' src="data:images/add.jpg"/> <img class='del' src="data:images/del.jpg"/></td>
  54.     </tr>
  55.     <tr bgcolor="#FAF3E9">
  56.         <td><input type="checkbox"/></td>
  57.         <td>张三</td>
  58.         <td>男</td>
  59.         <td>6565654315321321</td>
  60.         <td>短工</td>
  61.         <td>18625455412</td>
  62.         <td>1995-12-09</td>
  63.         <td>10,000.00</td>
  64.         <td><img class='add' src="data:images/add.jpg"/> <img class='del' src="data:images/del.jpg"/></td>
  65.     </tr>
  66. </table>
  67. <a href="#" class='newone'>新增</a>
  68. <script>
  69.     //动态添加行用on,不能用动态的tr，要用原来存在的元素去取值
  70.     $("table").on("click",".del",function () {
  71.         $(this).parents("tr").remove();
  72.     })
  73.     $(".newone").click(function () {
  74.             $("table").append('<tr bgcolor="#FAF3E9">'
  75.                 + '        <td><input  type="checkbox"/></td>'
  76.                 + '        <td>张三</td>'
  77.                 + '        <td>男</td>'
  78.                 + '        <td>6565654315321321</td>'
  79.                 + '        <td>短工</td>'
  80.                 + '        <td>18625455412</td>'
  81.                 + '        <td>1995-12-09</td>'
  82.                 + '        <td>10,000.00</td>'
  83.                 + '        <td>'
  84.                 + '            <img  class=\'add\' src="data:images/add.jpg" />'
  85.                 + '            <img class=\'del\' src="data:images/del.jpg" />'
  86.                 + '        </td>'
  87.                 + '      </tr>')
  88.         }
  89.     )
  90. </script>
  91. </body>
  92. </html>
  1.  

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. (转) Spring Boot JDBC 连接数据库

    文本将对在Spring Boot构建的Web应用中,基于MYSQL数据库的几种数据库连接方式进行介绍. 包括JDBC.JPA.MyBatis.多数据源和事务. 1 JDBC 连接数据库 1.1 属性配 ...

  2. （转）Linux开机启动(bootstrap)

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 计算机开机是一个神秘的过程.我们只是按了开机键,就看到屏幕上的进度条或者一行行的输 ...

  3. ExtJs的expand和collapse

    最近在研究ExtJs的窗口组件(Ext.window),关于扩展显示expand和折叠显示collapse的一点心得记录一下,以便后查. var win2 = new Ext.window({ id ...

  4. wpf的一些总结

    wpf技巧 隐藏控件不占空间,设置visibility为:Collapsed tabcontrol的高度宽度跟随界面的大小变化:属性height\width绑定grid的actualheight\ac ...

  5. 花了一年时间开发的TTF2FNT字库转换软件

    TTF(True Type Font)字库是微软定义的基于windows的标准字库格式.但其由于专利保护以及无法跨平台导致TTF字库在实际应用中无法有效使用. 为此我开发了TTF2FNT字库转换软件, ...

  6. div标签清除float浮动样式方法

    方法一. 这个方法来源于positioniseverything ,通过after伪类实现,完全兼容当前主流浏览器. 1 <style type="text/css"> ...

  7. Hadoop 新生报道（二） hadoop2.6.0 集群系统版本安装和启动配置

    本次基于Hadoop2.6版本进行分布式配置,Linux系统是基于CentOS6.5 64位的版本.在此设置一个主节点和两个从节点. 准备3台虚拟机,分别为: 主机名 IP地址 master 192. ...

  8. CSS样式----浮动（图文详解）

    标准文档流 宏观地讲,我们的web页面和photoshop等设计软件有本质的区别:web页面的制作,是个"流",必须从上而下,像"织毛衣".而设计软件,想往哪里 ...

  9. 【我的漫漫跨考路】有生之年·调完了BUG--冒泡排序C++版本

    正文之前 今天去牛客网试了试一些实战编程题,感觉贼有意思,但是也很难,挑了个成绩排序的算法题我就开始怼! 对我一个编程经验并不是很丰富的人来说,确实算是个挑战了. 所以我满满当当的搞了四个小时多,才算 ...

  10. Python解析PDF三法

    span{line-height:2em} --> 最近做调研想知道一些NZ当地的旅游信息,于是在NZ留学的友人自高奋勇地帮我去各个加油站拿了一堆旅游小册子,扫描了发给我. 但是他扫描出的高清图 ...