移動端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
})
移動端jq及zepto事件綁定