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 相关文章推荐
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
Jan 15 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
Jun 20 Javascript
JS链式调用的实现方法
Mar 07 Javascript
js动态创建表格,删除行列的小例子
Jul 20 Javascript
javascript使用isNaN()函数判断变量是否为数字
Sep 21 Javascript
JS解析XML实例分析
Jan 30 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
Sep 19 Javascript
js实现字符串和数组之间相互转换操作
Jan 12 Javascript
用JavaScript和jQuery实现瀑布流
Mar 19 Javascript
js的对象与函数详解
Jan 21 Javascript
vue+layui实现select动态加载后台数据的例子
Sep 20 Javascript
微信小程序 scroll-view 实现锚点跳转功能
Dec 12 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
mysql 全文搜索 技巧
2007/04/27 PHP
php学习笔记之 函数声明
2011/06/09 PHP
PHP 观察者模式的实现代码
2013/05/10 PHP
php的zip解压缩类pclzip使用示例
2014/03/14 PHP
ThinkPHP中自定义目录结构的设置方法
2014/08/15 PHP
Laravel 5 框架入门(三)
2015/04/09 PHP
PHP 9 大缓存技术总结
2015/09/17 PHP
PHP入门教程之图像处理技巧分析
2016/09/11 PHP
PHP简单实现合并2个数字键数组值的方法
2017/05/30 PHP
jquery实现固定顶部导航效果(仿蘑菇街)
2013/03/21 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
2013/12/12 Javascript
jQuery获取当前对象标签名称的方法
2014/02/07 Javascript
JS+CSS实现的拖动分页效果实例
2015/05/11 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
javascript弹出窗口实现代码
2015/11/12 Javascript
基于Jquery easyui 选中特定的tab
2015/11/17 Javascript
Javascript基于AJAX回调函数传递参数实例分析
2015/12/15 Javascript
通过BootStrap实现轮播图的实际应用
2016/09/26 Javascript
Bootstrap源码解读下拉菜单(4)
2016/12/23 Javascript
JavaScript实现跟随滚动缓冲运动广告框
2017/07/15 Javascript
使用taro开发微信小程序遇到的坑总结
2019/04/08 Javascript
[11:57]《一刀刀一天》第十七期:TI中国军团加油!
2014/05/26 DOTA
[55:44]OG vs NAVI 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
使用Nginx+uWsgi实现Python的Django框架站点动静分离
2016/03/21 Python
python遍历序列enumerate函数浅析
2017/10/17 Python
Python实现将蓝底照片转化为白底照片功能完整实例
2019/12/13 Python
Python运行DLL文件的方法
2020/01/17 Python
Python3.7黑帽编程之病毒篇(基础篇)
2020/02/04 Python
浅谈Python爬虫原理与数据抓取
2020/07/21 Python
蔻驰美国官网:COACH美国
2016/08/18 全球购物
Ado与Ado.net的相同与不同
2014/12/08 面试题
理工大学毕业生自荐信
2013/11/01 职场文书
酒吧总经理岗位职责
2013/12/10 职场文书
党校培训思想汇报
2014/01/03 职场文书
见习报告的格式
2014/10/31 职场文书
Spring Boot优化后启动速度快到飞起技巧示例
2022/07/23 Java/Android