zoukankan      html  css  js  c++  java
  • jQuery1.9+去除live()后的替代

    其实 live() 方法的替代方式已经写入《jQuery性能优化》这篇文章,但是我还是想把它单独写出来:

     live() 是jQuery1.3.1版本之后增加的方法,这个方法的功能就是为 新增的DOM元素 动态绑定事件。
    但对于效率来说,这个方法比较占用资源。所以请尽量不要使用它。

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

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

    使用live() 方法是这样:

    $('ul li').live('click', function () {  // 页面中存在 ul,li 通过 js 加入 ul 中
        // do something...
    });
    

      替代方法可以这样写:

    $('ul').on('click', 'li', function () {  // 页面中存在 ul,li 通过 js 加入 ul 中
        // do something...
    });

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

    还要注意个问题,如果是从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

     

    author:Lik
    Endeavoring to powerless, struggling to move yourself.
  • 相关阅读:
    A linked list is given such that each node contains an additional random pointer which could point to any node in the list or null. Return a deep copy of the list.
    leetcode算法
    leetcode
    UVA 11076 Add Again
    UVA 10892 LCM Cardinality
    HDU 5961 传递
    UVALive 7040 Color
    2014ACM/ICPC亚洲区广州站题解
    HDU 5136 Yue Fei's Battle
    HDU 5129 Yong Zheng's Death
  • 原文地址:https://www.cnblogs.com/likwin/p/7101590.html
Copyright © 2011-2022 走看看