最近做移動端網頁，用到了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 來綁定事件。