最近做移动端网页，用到了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 来绑定事件。

移动端jq及zepto事件绑定的更多相关文章

  1. 移动web app开发必备 - zepto事件问题

    问题描述: 项目在祖先元素上绑定了 touchstart,touchmove,touchend事件,用来处理全局性的事件,比如滑动翻页 正常状态下: 用户在子元素上有交互动作时,默认状态下都是会冒泡到 ...

  2. jQ的select事件和trigger方法的小冲突

    方法和事件都不难理解,分开用也都没问题,但是一起用就有些小问题出现. 直接上结论:使用trigger方法触发一个文本类型的 input 元素的select事件时,chrome浏览器会错误的触发三次,f ...

  3. IOS系统中使用zepto的live事件绑定不了的一个办法

    IOS系统中使用zepto的live事件绑定不了的一个办法: 对事件对象添加样式:cursor:pointer

  4. jQuery - 03. each、prevaAll、nextAll、获取属性、修改属性attr／val／text（）、jq.height/width、offset().／position().／scrol Left／Top 、事件绑定bind、delegate、on、事件解绑、事件对象、多库共存

    each 方法 $ ( selector).each(function( index,element) {  } );   参数一表示当前元素在所有匹配元素中的索引号 参数二表示当前元素(DOM对象) ...

  5. JQ动态生成节点绑定事件无效问题

    最近做项目的时候遇见了一个问题,通过jq将动态节点绑定到dom节点上,并且为动态节点绑定方法,此方法再次为动态节点添加动态节点,但在刷新之后,动态节点上的方法失效了,过程为:创建动态节点->动态 ...

  6. 事件委托和JQ事件绑定总结

    事件委托: 比喻:事件委托的事例在现实当中比比皆是.比如,有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台MM代为签收.现实当中,我们大都采用委托的方 ...

  7. jq事件绑定

    有些时候我们在页面中会动态的添加一下dom结构,当我们想要给这些结点添加事件时需要在此节点绑定一系列的操作. <a href="#" onclick="addBtn ...

  8. 移动端和pc端事件绑定方式以及取消浏览器默认样式和取消冒泡

    ### 两种绑定方式 (DOM0)1.obj.onclick = fn; (DOM2)2. ie:obj.attachEvent(事件名称,事件函数); 1.没有捕获(非标准的ie 标准的ie底下有 ...

  9. js、jq事件绑定方式总结——以click事件为例

    一.JavaScript点击事件绑定方法 1.1 HTML onclick事件属性 <button onclick="clickMe(this)">click me&l ...

随机推荐

  1. 使用Amanda ZRM备份远程MySQL数据库

    本文写道最后的时候,我才发现ZRM for MySQL的一个致命问题,就我目前的理解和测试来看,它恢复数据的时候是采取覆盖的方式,举个例子,假定某台数据库服务器上有两个数据库test1,test2,你 ...

  2. 51nod 1625 夹克爷发红包

    题目链接戳这里 题意是有一个赋有非负数的矩阵,每次可以将某一行or某一列替换成某个数值,可以替换<=k次,问如何替换能使得矩阵总和最大,输出最大值. 一开始想的是简单的贪心:比如找当前收益最大的 ...

  3. SDN2017 第三次实验作业

    实验目的 在给定如上实验拓扑情况下,用vlan得到下列虚拟网段 h1--h4互通 h2--h5互通 h3--h6互通 其余主机间无法通信 实验步骤 1. 创建拓扑 #! /usr/bin/python ...

  4. 【Ansible 文档】【译文】Ad-Hoc 命令介绍

    Introduction To Ad-Hoc Commands Ad-Hoc命令介绍 下面的例子展示了如何使用 /usr/bin/ansible 来运行ad hoc任务. 什么是ad hoc命令? 一 ...

  5. python 爬取全量百度POI

    在网上找了很多关于爬取百度POI的文章,但是对“全量”的做法并没有得到最终的解决方案,自己写了一个,但还是不能实现全量POI抓取,能够达到至少50%的信息抓取.注意:这里所指“全量”是能够达到100% ...

  6. Mac svn使用学习-4-客户端cli命令详解

    客户端cli的使用 WC:Working Copy 你的工作区 将文件或目录版本化,这样下一次提交到存储库的时候,他们就都会被提交上去.能实现版本化的命令有: add 1.import 是否访问存储库 ...

  7. Nginx端口占用问题

    错误信息:nginx: [emerg] listen() to 0.0.0.0:80, backlog 511 failed (98: Address already in use) 主要是端口被占用 ...

  8. WebView之禁止调用第三方浏览器

    一.WebView官方简洁: 一个显示视图的web页面.在这个类的基础上你可以滚自己的web浏览器或简单地显示一些网上的内容.它使用WebKit渲染引擎显示web页面,包括方法向前和向后导航历史,放大 ...

  9. 腾讯笔试题 构造回文（LCS问题）

    给定一个字符串s,你可以从中删除一些字符,使得剩下的串是一个回文串.如何删除才能使得回文串最长呢? 输出需要删除的字符个数. 输入描述: 输入数据有多组,每组包含一个字符串s,且保证:1<=s. ...

  10. 支持向量机通俗导论（理解SVM的三层境界）【非原创】

    支持向量机通俗导论(理解SVM的三层境界) 作者:July :致谢:pluskid.白石.JerryLead. 出处:结构之法算法之道blog. 前言 动笔写这个支持向量机(support vecto ...