jQuery中bind与live的用法及区别小结


Posted in Javascript onJanuary 27, 2014

首先介绍这两个方法之前,我们常用的是click()方法

$("a").click(function() {
     alert("hello");
});

click()方法是bind()方法的一种简单方法。在bind()中,
jQuery所有JavaScript事件对象,比如focus, mouseover,和resize,
都是可以作为type参数传递进来的。

参数:type,[data],function(eventObject)
例如:

$("p").bind("click",function(){
     alert("hello");
})

也可以传参
var message = "how are you!";
$("p").bind("click",{msg:message},function(e){
     alert(e.data.msg);
})

live()给所有匹配的元素附加一个事件处理函数,
即使这个元素是以后再添加进来的也有效。如下:
<tr class="mytr">
     <td class="mytd">Click me</td>
</tr>
$(".mytd").bind("click",function(){
      alert("hello");
})

点击Clike me 会弹出hello

此时添加一个新的元素进来

$(".mytr").after("<tr><td class='mytd'>后加的</td></tr>");

这时 再使用bind点击"后加的"不会执行
改为使用live()方法
$(".mytd").live("click",function(){
 alert("hello");
})

.live()方法能对一个还没有添加进DOM的元素有效,是由于使用了事件委托:
绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。
传递给 .live() 的事件处理函数不会绑定在元素上,而是把他作为一个特殊的事件处理函数,绑定在 DOM 树的根节点上。
Javascript 相关文章推荐
Web Inspector:关于在 Sublime Text 中调试Js的介绍
Apr 18 Javascript
深入领悟JavaScript中的面向对象
Nov 18 Javascript
利用jq让你的div居中的好方法分享
Nov 21 Javascript
jQuery操作select下拉框的text值和value值的方法
May 31 Javascript
javascript页面倒计时实例
Jul 25 Javascript
javascript实现手机震动API代码
Aug 05 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
Jul 09 Javascript
用jQuery的AJax实现异步访问、异步加载
Nov 02 Javascript
React Native中TabBarIOS的简单使用方法示例
Oct 13 Javascript
JS实现标签滚动切换效果
Dec 25 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
Apr 04 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
Jun 05 Javascript
jQuery实现动画效果的简单实例
Jan 27 #Javascript
firefox下jquery ajax返回object XMLDocument处理方法
Jan 26 #Javascript
js修改原型的属性使用介绍
Jan 26 #Javascript
解决extjs grid 不随窗口大小自适应的改变问题
Jan 26 #Javascript
JS批量修改PS中图层名称的方法
Jan 26 #Javascript
table对象中的insertRow与deleteRow使用示例
Jan 26 #Javascript
购物车选中得到价格实现示例
Jan 26 #Javascript
You might like
php存储过程调用实例代码
2013/02/03 PHP
php中addslashes函数与sql防注入
2014/11/17 PHP
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
js调用flash的效果代码
2008/04/26 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
2015/09/21 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
2016/06/09 Javascript
AngularJS 单选框及多选框的双向动态绑定
2017/04/20 Javascript
angular 基于ng-messages的表单验证实例
2017/05/04 Javascript
Vue和Bootstrap的整合思路详解
2017/06/30 Javascript
javascript 取小数点后几位几种方法总结
2017/08/02 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
2017/09/05 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
2019/11/26 Javascript
js用正则表达式筛选年月日的实例方法
2021/01/04 Javascript
[04:16]DOTA2全国高校联赛16强抽签
2018/05/02 DOTA
python 随机数使用方法,推导以及字符串,双色球小程序实例
2017/09/12 Python
TensorFlow在MAC环境下的安装及环境搭建
2017/11/14 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
在VS2017中用C#调用python脚本的实现
2019/07/31 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
用Python绘制漫步图实例讲解
2020/02/26 Python
Python如何实现自带HTTP文件传输服务
2020/07/08 Python
Python 实现3种回归模型(Linear Regression,Lasso,Ridge)的示例
2020/10/15 Python
pycharm 的Structure界面设置操作
2021/02/05 Python
详解HTML5新增标签
2017/11/27 HTML / CSS
Public Desire美国/加拿大:全球性的在线鞋类品牌
2018/12/17 全球购物
天逸系统(武汉)有限公司Java笔试题
2015/12/29 面试题
教育科学研究生自荐信
2013/10/09 职场文书
生产车间主任的个人自我鉴定
2013/10/25 职场文书
七一党建活动方案
2014/01/28 职场文书
北京大学自荐信范文
2014/01/28 职场文书
预备党员综合考察材料
2014/05/31 职场文书
爱祖国爱家乡演讲稿
2014/09/02 职场文书
村党支部书记四风问题个人对照检查材料思想汇报
2014/10/06 职场文书
机关作风建设心得体会
2014/10/22 职场文书
第一节英语课开场白
2015/06/01 职场文书
2015年终个人政治思想工作总结
2015/11/24 职场文书