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 清除输入框中的数据
Apr 13 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
Oct 09 Javascript
文本框输入时 实现自动提示(像百度、google一样)
Apr 05 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
Sep 02 Javascript
JS获取当前网页大小以及屏幕分辨率等
Sep 05 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
Jan 13 Javascript
JS闭包可被利用的常见场景小结
Apr 09 Javascript
vue中的provide/inject的学习使用
May 09 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
微信小程序定义和调用全局变量globalData的实现
Nov 01 Javascript
js实现可爱的气泡特效
Sep 05 Javascript
详解JSON.parse和JSON.stringify用法
Feb 18 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出现web系统多域名登录失败的解决方法
2014/09/30 PHP
php实现mysql数据库分表分段备份
2015/06/18 PHP
PHP中addcslashes与stripcslashes函数用法分析
2016/01/07 PHP
php性能分析之php-fpm慢执行日志slow log用法浅析
2016/10/17 PHP
JS定时器实例
2013/04/17 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
2013/04/19 Javascript
通过JS来判断页面控件是否获取焦点
2014/01/03 Javascript
使用js Math.random()函数生成n到m间的随机数字
2014/10/09 Javascript
详解jQuery简单的表单应用
2016/12/16 Javascript
JavaScript编写九九乘法表(两种任选)
2017/02/04 Javascript
在nginx上部署vue项目(history模式)的方法
2017/12/28 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
2018/09/27 Javascript
vue界面发送表情的实现代码
2020/09/11 Javascript
[04:16]完美世界DOTA2联赛PWL S2 集锦第一期
2020/11/23 DOTA
浅析Python基础-流程控制
2016/03/18 Python
Windows下安装Django框架的方法简明教程
2018/03/28 Python
pandas series序列转化为星期几的实例
2018/04/11 Python
解决python中使用plot画图,图不显示的问题
2018/07/04 Python
使用python Fabric动态修改远程机器hosts的方法
2018/10/26 Python
python多线程http压力测试脚本
2019/06/25 Python
centos7之Python3.74安装教程
2019/08/15 Python
tensorflow实现tensor中满足某一条件的数值取出组成新的tensor
2020/01/04 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
matplotlib图例legend语法及设置的方法
2020/07/28 Python
用python计算文件的MD5值
2020/12/23 Python
Python第三方库安装缓慢的解决方法
2021/02/06 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
HTML5通用接口详解
2016/06/12 HTML / CSS
FragranceNet中文网:北美健康美容线上零售商
2020/08/26 全球购物
高中学生干部学习的自我评价
2014/02/21 职场文书
教师自查自纠工作情况报告
2014/10/29 职场文书
护士长2014年终工作总结
2014/11/11 职场文书
2015年简历自我评价范文
2015/03/11 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书
干货干货!2019最新优秀创业计划书
2019/03/21 职场文书
MySQL中LAG()函数和LEAD()函数的使用
2022/08/14 MySQL