首页 > 上网技巧 > 电脑小技巧 > 移动端jq及zepto事件绑定

移动端jq及zepto事件绑定

时间:2018-11-22 08:57 作者:QQ地带 我要评论

最近做移动端网页,用到了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 来绑定事件。

标签: zepto
顶一下
(0)
0%
踩一下
(0)
0%

Google提供的广告