移动端jq及zepto事件绑定

时间 2019-12-07

标签移动 zepto 事件绑定栏目无线繁體版

原文原文链接

最近作移动端网页，用到了zepto.js , 其大体用法跟 jquery 差很少，可是在时间绑定的时候被困了很久的坑。html

这里说的主要是给将来元素绑定事件。将来元素：这里指的是经过 ajax 请求获得数据之后，再渲染到页面的新的组件或元素。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标签及内容：app

Js中请求数据成功之后是这样的：spa

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中这样绑定：code

$(“.ul_wrap”).delegate(“.new_li_item”, “click”, function(){

 // do something

})

在zepto中，以上jq的绑定方法无效，必须这样绑定：htm

$(“body .ul_wrap”).on(“click”, “.new_li_item”, function(){

 // do something

})

这两种用法原理是同样的，可是写法跟参数顺序不同。blog

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