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

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

 

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

   　……    
     
   
      
原始内容1
   
      
原始内容2
  
     
 

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

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

success: function( res ){  var appendObj = $(“.ul_wrap”);  if( res.code == 1 ){   var liLists = res.data;   for( var i=0; i
     
      ”+ liLists[i] +“”;    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 来绑定事件。