移動端jq及zepto事件綁定

時間 2019-12-07

標籤移動 zepto 事件綁定欄目無線简体版

原文原文鏈接

最近作移動端網頁，用到了zepto.js , 其大體用法跟 jquery 差很少，可是在時間綁定的時候被困了很久的坑。html

這裏說的主要是給將來元素綁定事件。將來元素：這裏指的是經過 ajax 請求獲得數據之後，再渲染到頁面的新的組件或元素。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標籤及內容：app

Js中請求數據成功之後是這樣的：spa

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中這樣綁定：code

$(「.ul_wrap」).delegate(「.new_li_item」, 「click」, function(){

 // do something

})

在zepto中，以上jq的綁定方法無效，必須這樣綁定：htm

$(「body .ul_wrap」).on(「click」, 「.new_li_item」, function(){

 // do something

})

這兩種用法原理是同樣的，可是寫法跟參數順序不同。blog

兩種用法中，前半部分選擇器要指定的元素必須是頁面上原本就存在的，好比說 body，.ul_wrap 都是頁面上原本就存在的元素，jq 用 delegate 來綁定事件，zepto 用 on 來綁定事件。事件

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。