JS delegate与live浅析


Posted in Javascript onDecember 21, 2013

在jquery里有两个方法可以用来绑定自动追加出来的DOM对象,它们是live和delegate,事实上,这两个方法是bind方法的一个变体,在对于固定DOM对象时,我们通常使用bind就可以了,而对象动态产生的DOM对象,使用bind就无能为力了,这时live和delegate就出场了,呵呵。

live方法,用来绑定某个(某类)对象,为它们绑定方法

    //live
            $("td").live("click", function () {
                alert($(this).html());
            });
           //下面也是可以的           $("#list td").live("click", function () { 
                 alert($(this).html()); 
           });

delegate方法,用来绑定某个(某类)对象下的子对象,为子对象绑定方法(委托子对象,让子对象有某种方法,呵呵)
 $("#list").delegate("td", "click", function () {
                alert($(this).html());
            });

下面的DEMO的完成代码:

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="jquery.js" type="text/javascript"></script>
    <script id="listTemplate" type="text/html">
        <tr>
            <td>[UserID]</td>
            <td>[UserImg]</td>
            <td>[UserName]</td>
        </tr>
    </script>
    <script type="text/javascript">
        var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm'); //i g m是指分别用于指定区分大小写的匹配、全局匹配和多行匹配。
        $(function () {
            //live
            $("#list td").live("click", function () {
                alert($(this).html());
            });
            $("#addFun").click(function () {
                var html = document.getElementById("listTemplate").innerHTML;
                var source = html.replace(reg, function (node, key) { return { 'UserImg': '1', 'UserName': 'zhang', 'UserID': '1' }[key]; });
                $("#list").append(source);
            });
        });
    </script>
</head>
<body>
    <div id="comment_ul_2">
    </div>
    <input type="button" id="addFun" value="click me" />
    <table id="list" border="1">
        <tbody>
        </tbody>
    </table>
</body>
</html>
Javascript 相关文章推荐
基于JQuery模仿苹果桌面的Dock效果(初级版)
Oct 15 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
Feb 05 Javascript
css+js实现部分区域高亮可编辑遮罩层
Mar 04 Javascript
浅谈js的setInterval事件
Dec 05 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
Feb 27 Javascript
jQuery实现扑克正反面翻牌效果
Mar 10 Javascript
JavaScript数据结构之二叉树的计数算法示例
Apr 13 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
Feb 09 Javascript
JavaScript实现表单注册、表单验证、运算符功能
Oct 15 Javascript
bootstrap中的导航条实例代码详解
May 20 Javascript
JS实现碰撞检测效果
Mar 12 Javascript
公众号SVG动画交互实战代码
May 31 Javascript
jQuery中delegate与on的用法与区别示例介绍
Dec 20 #Javascript
jquery数组之存放checkbox全选值示例代码
Dec 20 #Javascript
jquery如何通过name名称获取当前name的value值
Dec 20 #Javascript
前台js对象在后台转化java对象的问题探讨
Dec 20 #Javascript
Javascript selection的兼容性写法介绍
Dec 20 #Javascript
在每个匹配元素的外部插入新元素的方法
Dec 20 #Javascript
浅谈javascript六种数据类型以及特殊注意点
Dec 20 #Javascript
You might like
php检查页面是否被百度收录
2015/10/28 PHP
php异常处理捕获错误整理
2019/09/23 PHP
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
2009/11/30 Javascript
基于jquery的商品展示放大镜
2010/08/07 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
2012/03/21 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
2012/12/17 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
2012/12/25 Javascript
js导出txt示例代码
2014/01/14 Javascript
javascript获取当前的时间戳的方法汇总
2015/07/26 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
2015/10/29 Javascript
详解JavaScript基于面向对象之继承实例
2015/12/16 Javascript
jquery单击事件和双击事件冲突解决方案
2016/03/02 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
jQuery按需加载轮播图(web前端性能优化)
2017/02/17 Javascript
requirejs + vue 项目搭建详解
2017/06/16 Javascript
vue页面使用阿里oss上传功能的实例(一)
2017/08/09 Javascript
Express的HTTP重定向到HTTPS的方法
2018/06/06 Javascript
小程序实现日历左右滑动效果
2019/10/21 Javascript
微信小程序实现翻牌抽奖动画
2020/09/21 Javascript
python通过pil为png图片填充上背景颜色的方法
2015/03/17 Python
Python实现从脚本里运行scrapy的方法
2015/04/07 Python
启动targetcli时遇到错误解决办法
2017/10/26 Python
TensorFlow损失函数专题详解
2018/04/26 Python
使用Python制作自动推送微信消息提醒的备忘录功能
2018/09/06 Python
Python将string转换到float的实例方法
2019/07/29 Python
python绘制动态曲线教程
2020/02/24 Python
Windows下Anaconda安装、换源与更新的方法
2020/04/17 Python
Superdry瑞典官网:英国日本街头风品牌
2017/05/17 全球购物
Hotels.com泰国:酒店预订网站
2019/11/20 全球购物
《那片绿绿的爬山虎》教学反思
2014/02/27 职场文书
巾帼文明岗汇报材料
2014/12/24 职场文书
幼儿园重阳节活动总结
2015/05/05 职场文书
房屋所有权证明
2015/06/19 职场文书
phpQuery解析HTML乱码问题(补充官网未列出的乱码解决方案)
2021/04/01 PHP
Javascript中的解构赋值语法详解
2021/04/02 Javascript
教你怎么用Python selenium操作浏览器对象的基础API
2021/06/23 Python