zoukankan      html  css  js  c++  java
  • 移动端jq及zepto事件绑定

    最近做移动端网页,用到了zepto.js , 其大致用法跟 jquery 差不多,但是在时间绑定的时候被困了好久的坑。

    这里说的主要是给未来元素绑定事件。未来元素:这里指的是通过 ajax 请求得到数据以后,再渲染到页面的新的组件或元素。

     

    比如说原始页面是这样的:

    <html>
     <head>
     …… </head> <body> <ul class=“ul_wrap”> <li class=“li_item”>原始内容1</li> <li class=“li_item”>原始内容2</li> </ul> </body> </html>

    然后再通过请求数据,想页面中插入新的li标签及内容:

    Js中请求数据成功以后是这样的:

    success: function( res ){
      var appendObj = $(“.ul_wrap”);
      if( res.code == 1 ){
       var liLists = res.data;
       for( var i=0; i<liLists.length; i++ ){
        var new_li_item = “<li class=‘new_li_item’>”+ liLists[i] +“</li>”;
        appendObj.html( appendObj.html() + new_li_item );
       }
      }
     }

    延迟加载完以后,带有 new_li_item 类的就是上文所说的未来元素,比如说现在要给这些未来元素绑定点击事件,在jq中这样绑定:

    $(“.ul_wrap”).delegate(“.new_li_item”, “click”, function(){
    
     // do something
    
    })

    zepto中,以上jq的绑定方法无效,必须这样绑定:

    $(“body .ul_wrap”).on(“click”, “.new_li_item”, function(){
    
     // do something
    
    })

    这两种用法原理是一样的,但是写法跟参数顺序不一样。

    两种用法中,前半部分选择器要指定的元素必须是页面上本来就存在的,比如说 body,.ul_wrap 都是页面上本来就存在的元素,jq 用 delegate 来绑定事件,zepto 用 on 来绑定事件。

  • 相关阅读:
    Linux 信号signal处理机制
    va_start、va_arg、va_end、va_copy 可变参函数
    辛星笔记——VIM学习篇(推荐阅读)
    每个程序员都应该读的书
    igmpproxy源代码学习——配置信息加载 loadConfig
    windows下gvim搭建IDE
    插入排序与循环不变式
    6个变态的C语言程序
    安卓原生百度地图(5)导航和语音播报
    安卓原生百度地图(4)路线规划
  • 原文地址:https://www.cnblogs.com/yaoyuqian/p/8376282.html
Copyright © 2011-2022 走看看