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.
  • 相关阅读:
    C#磁吸屏幕窗体类库
    准备
    我写的诗
    How to turn off a laptop keyboard
    How to tell which commit a tag points to in Git?
    Why should I care about lightweight vs. annotated tags?
    How to get rid of “would clobber existing tag”
    Facebook, Google and Twitter threaten to leave Hong Kong over privacy law changes
    The need for legislative reform on secrecy orders
    Can a foreign key be NULL and/or duplicate?
  • 原文地址:https://www.cnblogs.com/likwin/p/7101590.html
Copyright © 2011-2022 走看看