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 相关文章推荐
Dojo Javascript 编程规范 规范自己的JavaScript书写
Oct 26 Javascript
js淡入淡出焦点图幻灯片效果代码分享
Sep 08 Javascript
JavaScript 中对象的深拷贝
Dec 04 Javascript
Bootstrap表单控件使用方法详解
Jan 11 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
Jan 19 Javascript
使用vue.js编写蓝色拼图小游戏
Mar 17 Javascript
vue父组件中获取子组件中的数据(实例讲解)
Sep 27 Javascript
详解vue使用$http服务端收不到参数
Apr 19 Javascript
浅谈小程序globalData的那些事儿
Nov 01 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
Nov 06 Javascript
原生JavaScript实现拖动校验功能
Sep 29 Javascript
利用JavaScript为句子加标题的3种方法示例
Jan 05 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
JAVA/JSP学习系列之二
2006/10/09 PHP
PHP中::、-&amp;gt;、self、$this几种操作符的区别介绍
2013/04/24 PHP
新浪的图片新闻效果
2007/01/13 Javascript
php和js对数据库图片进行等比缩放示例
2014/04/28 Javascript
angularJS 入门基础
2015/02/09 Javascript
js实现仿阿里巴巴城市选择框效果实例
2015/06/24 Javascript
用Move.js配合创建CSS3动画的入门指引
2015/07/22 Javascript
JS实现具备延时功能的滑动门菜单效果
2015/09/17 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
2016/05/30 Javascript
开发Vue树形组件的示例代码
2017/12/21 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
2018/09/16 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
微信小程序实现省市区三级地址选择
2020/06/21 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
2018/12/20 Javascript
Vue源码探究之虚拟节点的实现
2019/04/17 Javascript
javascript实现京东快递单号的查询效果
2020/11/30 Javascript
[03:18]DOTA2亚洲邀请赛小组赛第一日 RECAP赛事回顾
2015/01/30 DOTA
[54:43]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第一场 2月22日
2021/03/11 DOTA
Python ORM框架SQLAlchemy学习笔记之数据添加和事务回滚介绍
2014/06/10 Python
Python写入CSV文件的方法
2015/07/08 Python
快速实现基于Python的微信聊天机器人示例代码
2017/03/03 Python
numpy中索引和切片详解
2017/12/15 Python
Python方法的延迟加载的示例代码
2017/12/18 Python
对pandas的层次索引与取值的新方法详解
2018/11/06 Python
Python这样操作能存储100多万行的xlsx文件
2019/04/16 Python
Python编写一个验证码图片数据标注GUI程序附源码
2019/12/09 Python
python入门之基础语法学习笔记
2020/02/08 Python
Python3如何在服务器打印资产信息
2020/08/27 Python
劳资员岗位职责
2013/11/11 职场文书
生物科学专业职业规划书范文
2014/02/11 职场文书
技校学生个人职业生涯规划范文
2014/03/03 职场文书
中药专业自荐信范文
2014/03/18 职场文书
2014年学习全国道德模范事迹思想汇报
2014/09/15 职场文书
2014年实验室工作总结
2014/12/03 职场文书
党风廉政建设心得体会
2019/05/21 职场文书
Python 读写 Matlab Mat 格式数据的操作
2021/05/19 Python