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与CSS复习(《精通javascript》)
Jun 29 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
May 07 Javascript
jquery datepicker参数介绍和示例
Apr 15 Javascript
javascript的创建多行字符串的7种方法
Apr 29 Javascript
jQuery EasyUI datagrid实现本地分页的方法
Feb 13 Javascript
JQuery中Bind()事件用法分析
May 05 Javascript
Listloading.js移动端上拉下拉刷新组件
Aug 04 Javascript
jQuery多级联动下拉插件chained用法示例
Aug 20 Javascript
简单谈谈ES6的六个小特性
Nov 18 Javascript
js实现导航吸顶效果
Feb 24 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 Javascript
JS实现的雪花飘落特效示例
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
改进的IP计数器
2006/10/09 PHP
繁体中文转换为简体中文的PHP函数
2006/10/09 PHP
PHP实现MySQL更新记录的代码
2008/06/07 PHP
深入解析php之apc
2013/05/15 PHP
php 字符串中是否包含指定字符串的多种方法
2018/04/12 PHP
php接口隔离原则实例分析
2019/11/11 PHP
学习js所必须要知道的一些
2007/03/07 Javascript
javascript 尚未实现错误解决办法
2008/11/27 Javascript
JavaScript 学习笔记(十六) js事件
2010/02/01 Javascript
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
javascript回车完美实现tab切换功能
2014/03/13 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
2014/05/16 Javascript
js限制文本框只能输入数字方法小结
2014/06/16 Javascript
js实现双击图片放大单击缩小的方法
2015/02/17 Javascript
在Javascript中处理字符串之big()方法的使用
2015/06/08 Javascript
如何提高javascript加载速度
2016/12/26 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
2016/12/27 Javascript
vue-cli如何引入bootstrap工具的方法
2017/10/19 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
2017/11/03 Javascript
React之PureComponent的使用作用
2018/07/10 Javascript
[00:27]DOTA2战队VP、Secret贺新春
2018/02/11 DOTA
python对excel文档去重及求和的实例
2018/04/18 Python
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
python对视频画框标记后保存的方法
2018/12/07 Python
Python Subprocess模块原理及实例
2019/08/26 Python
基于python中__add__函数的用法
2019/11/25 Python
python函数定义和调用过程详解
2020/02/09 Python
Python同时处理多个异常的方法
2020/07/28 Python
台湾网友喜爱的综合型网路购物商城:Yahoo! 奇摩购物中心
2018/03/10 全球购物
好的自荐信的要求
2013/10/30 职场文书
装修协议书范本
2014/04/21 职场文书
党员承诺书格式
2014/05/21 职场文书
大学第二课堂活动总结
2014/07/08 职场文书
劳资员岗位职责
2015/02/13 职场文书
教师工作能力自我评价
2015/03/04 职场文书
少先队中队工作总结
2015/08/14 职场文书