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 的 $(&quot;#id&quot;).html() 无内容的解决方法
Jun 07 Javascript
artdialog的图片/标题以及关闭按钮不显示的解决方法
Jun 27 Javascript
通过onmouseover选项卡实现img图片的变化
Feb 12 Javascript
jquery ui resize 中border-box的bug修正
Apr 26 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
Apr 03 Javascript
AngularJS 模块详解及简单实例
Jul 28 Javascript
利用浮层使select不可选的实现方法
Dec 03 Javascript
js代码延迟一定时间后执行一个函数的实例
Feb 15 Javascript
jquery.flot.js简单绘制折线图用法示例
Mar 13 Javascript
Vue响应式原理Observer、Dep、Watcher理解
Jun 06 Javascript
解决Vue watch里调用方法的坑
Nov 07 Javascript
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
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 工厂模式使用方法
2010/05/18 PHP
php表单请求获得数据求和示例
2014/05/15 PHP
PHP利用MySQL保存session的实现思路及示例代码
2014/09/09 PHP
php浏览历史记录的方法
2015/03/10 PHP
PHP表单提交后引号前自动加反斜杠的原因及三种办法关闭php魔术引号
2015/09/30 PHP
php单链表实现代码分享
2016/07/04 PHP
php微信公众号开发模式详解
2016/11/28 PHP
JS处理VBArray的函数使用说明
2008/05/11 Javascript
在javascript中对于DOM的加强
2013/04/11 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
2013/04/16 Javascript
jQuery中get和post方法传值测试及注意事项
2014/08/08 Javascript
JavaScript实现对下拉列表值进行排序的方法
2015/07/15 Javascript
JS基于Ajax实现的网页Loading效果代码
2015/10/27 Javascript
JS实现禁止鼠标右键的功能
2016/10/15 Javascript
javascript九宫格图片随机打乱位置的实现方法
2017/03/15 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
2017/05/19 Javascript
聊聊JS动画库 Velocity.js的使用
2018/03/13 Javascript
vue 实现的树形菜的实例代码
2018/03/19 Javascript
vue接入腾讯防水墙代码
2019/05/07 Javascript
js实现列表按字母排序
2020/08/11 Javascript
python二分法实现实例
2013/11/21 Python
python 字符串常用函数详解
2019/09/11 Python
python将dict中的unicode打印成中文实例
2020/05/11 Python
python利用线程实现多任务
2020/09/18 Python
如何使用localstorage代替cookie实现跨域共享数据问题
2018/04/18 HTML / CSS
Trina Turk官网:美国时装和泳装品牌
2018/06/10 全球购物
在职研究生自我鉴定
2013/10/16 职场文书
小区门卫工作职责
2013/12/14 职场文书
业务副厂长岗位职责
2014/01/03 职场文书
医学求职自荐信
2014/06/21 职场文书
副总经理党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/06 职场文书
烛光里的微笑观后感
2015/06/17 职场文书
学生会招新宣传语
2015/07/13 职场文书
写作指导:怎么书写竞聘演讲稿?
2019/07/04 职场文书
深入理解redis中multi与pipeline
2021/06/02 Redis
css常用字体属性与背景属性介绍
2022/02/28 HTML / CSS