zoukankan      html  css  js  c++  java
  • jQuery 之用on()代替live()(已废弃)

    自jQuery1.7以后,live()被废弃;自jQuery1,9以后,live被移除。同理,在jQuery1.7以后,建议用on()代替bind()、live() 和 delegate()。

    1     语法

    on()和live()的语法分别如下:

    1 // on的语法
    2 $(selector).on(event ,data, function)
    3 // bind的语法
    4 $(selector).live(event,data,function)

    参数

    描述

    *event

    必需。规定要从被选元素添加的一个或多个事件或命名空间。

    由空格分隔多个事件值,也可以是数组。必须是有效的事件。

    data

    可选。规定传递到函数的额外数据。

    function

    可选。规定当事件发生时运行的函数。

    从这里可以看出,on()与live()的区别在于,on()能够添加到指定的子元素处理程序。看来,on()的内心有着它的继承者,而live()的内心只有自己。

    2     例子

    下面,一个例子,点击button,切换p的显示和隐藏(由于例子简单,就不显示页面效果了)。HTML代码如下:

    1 <body>
    2     <div style="background-color:red">
    3         <p>这是一个段落。</p>
    4         <button>请点击这里</button>
    5     </div>
    6 </body>

    使用live()方法jQuery代替如下:

    1 $(document).ready(function(){
    2   $("button").live("click",function(){
    3     $("p").slideToggle();
    4   });
    5 });

    使用on()方法代替live()代码如下:

    1 $(document).ready(function () {
    2     $("button").on("click", function () {
    3         $("p").slideToggle();
    4     });
    5 });

    我们注意到,on可以添加指定子元素的处理程序。因此,jQuery代码也可以如下表示:

    1 $(document).ready(function () {
    2     $("body").on("click", "button", function () {
    3         $("p").slideToggle();
    4     });
    5 });

    完结,✿✿ヽ(°▽°)ノ✿。

    3     扩展问题

    参考网址

    jQuery 事件 - live() 方法: https://www.w3school.com.cn/jquery/event_live.asp

    https://www.runoob.com/try/try.php?filename=tryjquery_event_on_live

    有志者,事竟成,破釜沉舟,百二秦关终属楚; 苦心人,天不负,卧薪尝胆,三千越甲可吞吴。
  • 相关阅读:
    iOS中过滤html文档中的标签
    十六进制函数转换UIColor对象
    vue使用echarts
    vue打包部署
    charels代理跨域访问接口
    vue 使用highcharts
    vue配置跨域
    命令行
    安装nvm
    vsCode个人设置
  • 原文地址:https://www.cnblogs.com/luyj00436/p/14897391.html
Copyright © 2011-2022 走看看