p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545; min-height: 14.0px }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 }
span.s1 { font: 12.0px "Helvetica Neue" }
span.s2 { font: 12.0px ".PingFang SC" }
span.Apple-tab-span { white-space: pre }
最近做移动端网页，用到了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
})
原文地址：https://www.cnblogs.com/yaoyuqian/p/8376282.html