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 相关文章推荐
获取服务器传来的数据 用JS去空格的正则表达式
Mar 26 Javascript
Jquery为a标签的href赋值实现代码
May 03 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
Jun 05 Javascript
利用JS进行图片的切换即特效展示图片
Dec 03 Javascript
jQuery入门介绍之基础知识
Jan 13 Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 Javascript
js实现点击获取验证码倒计时效果
Jan 28 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
Mar 22 Javascript
vue+Element实现搜索关键字高亮功能
May 28 Javascript
jquery插件开发模式实例详解
Jul 20 jQuery
Postman如何实现参数化执行及断言处理
Jul 28 Javascript
JavaScript十大取整方法实例教程
Dec 03 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生成缩略图的函数代码(修改版)
2011/01/18 PHP
PHP5.3的垃圾回收机制(动态存储分配方案)深入理解
2012/12/10 PHP
php基于dom实现读取图书xml格式数据的方法
2017/02/03 PHP
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
2010/12/02 Javascript
javascript中关于执行环境的杂谈
2011/08/14 Javascript
js里怎么取select标签里的值并修改
2012/12/10 Javascript
JavaScript中的setMilliseconds()方法使用详解
2015/06/11 Javascript
JavaScript中用toString()方法返回时间为字符串
2015/06/12 Javascript
jQuery实现只允许输入数字和小数点的方法
2016/03/02 Javascript
node.js文件上传处理示例
2016/10/27 Javascript
Servlet实现文件上传,可多文件上传示例
2016/12/05 Javascript
Bootstrap常用组件学习(整理)
2017/03/24 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
简单谈谈原生js的math对象
2017/06/27 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
2017/11/28 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
2018/08/28 jQuery
openlayers 3实现车辆轨迹回放
2020/09/24 Javascript
javascript局部自定义鼠标右键菜单
2020/12/08 Javascript
node koa2 ssr项目搭建的方法步骤
2020/12/11 Javascript
[01:32]2014DOTA2西雅图邀请赛 CIS我们有信心进入正赛
2014/07/08 DOTA
Python 文件操作技巧(File operation) 实例代码分析
2008/08/11 Python
python和shell变量互相传递的几种方法
2013/11/20 Python
轻松掌握python设计模式之策略模式
2016/11/18 Python
Java分治归并排序算法实例详解
2017/12/12 Python
使用Python的Django和layim实现即时通讯的方法
2018/05/25 Python
python实现简单登陆系统
2018/10/18 Python
python 图像平移和旋转的实例
2019/01/10 Python
python ChainMap 合并字典的实现步骤
2019/06/11 Python
django的model操作汇整详解
2019/07/26 Python
PyTorch中的Variable变量详解
2020/01/07 Python
波兰品牌内衣及泳装网上商店:Astratex.pl
2017/02/03 全球购物
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
卖车协议书
2014/04/21 职场文书
办公室文员岗位职责
2015/02/04 职场文书
2015年统战工作总结
2015/05/19 职场文书
2016年社区国庆节活动总结
2016/04/01 职场文书