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 相关文章推荐
图片自动更新(说明)
Oct 02 Javascript
使用jQuery在对象中缓存选择器的简单方法
Jun 30 Javascript
使用canvas实现仿新浪微博头像截取上传功能
Sep 02 Javascript
微信小程序 window_x64环境搭建
Sep 30 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
Jan 05 Javascript
javascript实现日期三级联动下拉框选择菜单
Dec 03 Javascript
微信小程序页面滑动屏幕加载数据效果
Nov 16 Javascript
vue的toast弹窗组件实例详解
May 14 Javascript
vue axios数据请求及vue中使用axios的方法
Sep 10 Javascript
Iview Table组件中各种组件扩展的使用
Oct 20 Javascript
JavaScript实现简单日历效果
Sep 11 Javascript
Node.js fs模块原理及常见用途
Oct 22 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微信公众号自动发送红包API
2016/06/01 PHP
PHP将URL转换成短网址的算法分享
2016/09/13 PHP
Laravel实现ORM带条件搜索分页
2019/10/24 PHP
javascript Math.random()随机数函数
2009/11/04 Javascript
js 多种变量定义(对象直接量,数组直接量和函数直接量)
2010/05/24 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
JavaScript类属性的访问方式详解
2014/02/11 Javascript
JQuery中extend的用法实例分析
2015/02/08 Javascript
使用bootstrap3开发响应式网站
2016/05/12 Javascript
AngularJS学习第一篇 AngularJS基础知识
2017/02/13 Javascript
ES6新增的math,Number方法
2017/08/06 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
vue升级之路之vue-router的使用教程
2018/08/14 Javascript
vue日历/日程提醒/html5本地缓存功能
2019/09/02 Javascript
Vue中用JSON实现刷新界面不影响倒计时
2020/10/26 Javascript
Python的MongoDB模块PyMongo操作方法集锦
2016/01/05 Python
Python实现PS滤镜中马赛克效果示例
2018/01/20 Python
OpenCV+python手势识别框架和实例讲解
2018/08/03 Python
Python两个字典键同值相加的几种方法
2019/03/05 Python
python中的subprocess.Popen()使用详解
2019/12/25 Python
python怎么判断素数
2020/07/01 Python
关于Python字符编码与二进制不得不说的一些事
2020/10/04 Python
详解Selenium-webdriver绕开反爬虫机制的4种方法
2020/10/28 Python
python 装饰器的基本使用
2021/01/13 Python
HTML5 离线应用之打造零请求、无流量网站的解决方法
2013/04/25 HTML / CSS
Bealls Florida百货商店:生活服饰、家居装饰和鞋子
2018/02/23 全球购物
巴西电子、家电、智能手机购物网站:Girafa
2019/06/04 全球购物
高二美术教学反思
2014/01/14 职场文书
检查接待方案
2014/02/27 职场文书
汽车维修求职信
2014/06/15 职场文书
单位介绍信格式
2015/01/31 职场文书
大学毕业生自我鉴定范文
2019/06/21 职场文书
如何用JS实现简单的数据监听
2021/05/06 Javascript
React Native项目框架搭建的一些心得体会
2021/05/28 Javascript
Python+Tkinter制作专属图形化界面
2022/04/01 Python
使用Python开发贪吃蛇游戏 SnakeGame
2022/04/30 Python