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 相关文章推荐
原生js的弹出层且其内的窗口居中
May 14 Javascript
jQuery插件pagewalkthrough实现引导页效果
Jul 05 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
Aug 04 Javascript
前端弹出对话框 js实现ajax交互
Sep 09 Javascript
jquery uploadify如何取消已上传成功文件
Feb 08 Javascript
完美实现js拖拽效果 return false用法详解
Jul 28 Javascript
解析Vue 2.5的Diff算法
Nov 28 Javascript
Canvas实现微信红包照片效果
Aug 21 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
Nov 30 Javascript
使用layui前端框架弹出form表单以及提交的示例
Oct 25 Javascript
javascript实现移动端红包雨页面
Jun 23 Javascript
JS数组的常用方法整理
Mar 31 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实现抓取Google IP并自动修改hosts文件
2015/02/12 PHP
php中smarty实现多模版网站的方法
2015/06/11 PHP
PHP读书笔记_运算符详解
2016/07/01 PHP
Linux平台php命令行程序处理管道数据的方法
2016/11/10 PHP
Yii2.0框架实现带分页的多条件搜索功能示例
2019/02/20 PHP
PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
2019/05/21 PHP
popdiv
2006/07/14 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
2010/08/07 Javascript
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
2010/08/13 Javascript
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
jquery zTree异步加载简单实例分享
2013/02/05 Javascript
js改变img标签的src属性在IE下没反应的解决方法
2013/07/23 Javascript
Javascript字符串浏览器兼容问题分析
2014/12/01 Javascript
深入浅析JavaScript中的3DES
2016/08/24 Javascript
关于JavaScript数组你所不知道的3件事
2016/08/24 Javascript
Bootstrap基本组件学习笔记之面板(14)
2016/12/08 Javascript
实现两个文本框同时输入的实例
2017/09/25 Javascript
node使用Koa2搭建web项目的方法
2017/10/17 Javascript
js中如何完美的解析数据
2018/03/18 Javascript
JavaScript简单实现的仿微博留言功能示例
2019/01/17 Javascript
js图片无缝滚动插件使用详解
2020/05/26 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
小程序选项卡以及swiper套用(跨页面)
2020/06/19 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
2020/12/30 jQuery
Python通过poll实现异步IO的方法
2015/06/04 Python
Python中文件的读取和写入操作
2018/04/27 Python
Python实现钉钉订阅消息功能
2020/01/14 Python
python3.7中安装paddleocr及paddlepaddle包的多种方法
2020/11/27 Python
html如何对span设置宽度
2019/10/30 HTML / CSS
马来西亚网上美容店:Hermo.my
2017/11/25 全球购物
中学门卫岗位职责
2013/12/26 职场文书
婚礼答谢宴主持词
2014/03/14 职场文书
小学评语大全
2014/04/22 职场文书
期末复习计划
2015/01/19 职场文书
2015年青年志愿者工作总结
2015/05/20 职场文书
MySQL图形化管理工具Navicat安装步骤
2021/12/04 MySQL