zoukankan      html  css  js  c++  java
  • jQuery live()方法使用及变更(事件委托)

    根据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')});//注意 '.son'不是$('.son')

    这个触发选择器实际上就是在 JQ内部判断了一次事件参数的$(e.target).is(selector),只有触发对象匹配触发选择器才会触发。这是利用了事件冒泡的机制来完成 的,原本的live也是使用冒泡机制所以既然on可以实现那么live也就没有存在的必要了,只不过为了兼容让它从1.7苟延残喘的活到了1.9而已。
      这篇文章也没啥内容了,接下来就用这个功能做点有意义的事情示范下吧~ 在低版本IE中A标签在鼠标按下时候会出现虚线边框,这是由focus造成的。我们只要在全局事件中做点手脚就能解决这个问题。在现代浏览器中focus是不冒泡的,但是低版本浏览器中可以冒泡。所以对于低版本浏览器中对focus使用live是有效的。在jQuery1.9之前的版本我们可以这样写:

    $("a").live("focus",function(){
      this.blur();
    }); 

    jQuery1.9之后由于live被删除了,所以应该这样写:

    $(document).on("focus","a",function(){
      this.blur();
    }); 

    还要注意个问题,如果是从live的写法换成on的写法别忘了调整调用链。因为live的返回值是事件触发的对象,而使用on则是在容器对象上。

    复制代码
    //jQuery1.9-
    $("#panel").find("div").live("click",function(){
      alert("x");
    }).addClass("x");
    
    //jQuery1.9+
    $("#panel").on("click","div",function(){   //click后面只能带  '.class' 不能是变量 对象什么的(上次就放了个json对象 弄的烦死了)
      alert("x");
    }).find("div").addClass("x");   
    复制代码

    注意最后的find("div"),其它就没什么问题了。下面是官方说明
      http://jquery.com/upgrade-guide/1.9/#live-removed

  • 相关阅读:
    3D切割轮播图
    网站公共部分的复用
    Git的安装及布置
    完整轮播图
    百度检索例子
    第五章 pycharm编辑器安装和使用
    第四章 散列类型的方法
    第一章 认识爬虫以及环境安装
    主机访问Ubuntu虚拟机的jupyter
    12306购票的testerSunshine带源码刷票
  • 原文地址:https://www.cnblogs.com/Greenzgz/p/4635828.html
Copyright © 2011-2022 走看看