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中replace的用法总结
Dec 27 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
May 14 Javascript
window.location.hash知识汇总
Nov 09 Javascript
深入浅析同源策略和跨域访问
Nov 26 Javascript
Bootstrap项目实战之子栏目资讯内容
Apr 25 Javascript
JavaScript数组实现数据结构中的队列与堆栈
May 26 Javascript
jquery表单验证插件validation使用方法详解
Jan 20 Javascript
网页中右键功能的实现方法之contextMenu的使用
Feb 20 Javascript
vue货币过滤器的实现方法
Apr 01 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
Feb 22 Javascript
layui 对弹窗 form表单赋值的实现方法
Sep 04 Javascript
Vue实现简单的拖拽效果
Aug 25 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的类 功能齐全的发送邮件类
2006/10/09 PHP
Smarty模板快速入门
2007/01/04 PHP
用php实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
变量在 PHP7 内部的实现(一)
2015/12/21 PHP
php监测数据是否成功插入到Mysql数据库的方法
2016/11/25 PHP
javascript AOP 实现ajax回调函数使用比较方便
2010/11/20 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
2020/04/04 Javascript
EasyUI中实现form表单提交的示例分享
2015/03/01 Javascript
原生js实现图片轮播特效
2015/12/18 Javascript
深入浅析JavaScript面向对象和原型函数
2016/02/06 Javascript
JavaScript制作简单分页插件
2016/09/11 Javascript
原生JS实现匀速图片轮播动画
2016/10/18 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
2017/02/23 Javascript
JavaScript中重名的函数与对象示例详析
2017/09/28 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
2017/10/26 Javascript
nodejs读取并去重excel文件
2018/04/22 NodeJs
AngularJS修改model值时,显示内容不变的实例
2018/09/13 Javascript
Vue中用props给data赋初始值遇到的问题解决
2018/11/27 Javascript
JS如何生成随机验证码
2020/03/02 Javascript
vue select 获取value和lable操作
2020/08/28 Javascript
微信小程序实现页面监听自定义组件的触发事件
2020/11/01 Javascript
Python类的基础入门知识
2008/11/24 Python
Python基于smtplib实现异步发送邮件服务
2015/05/28 Python
分享python数据统计的一些小技巧
2016/07/21 Python
Pycharm编辑器技巧之自动导入模块详解
2017/07/18 Python
老生常谈进程线程协程那些事儿
2017/07/24 Python
Python常用的json标准库
2019/02/19 Python
Python实现定制自动化业务流量报表周报功能【XlsxWriter模块】
2019/03/11 Python
程序员经常用到的UNIX命令
2015/04/13 面试题
监理资料员岗位职责
2014/01/03 职场文书
大堂副理的岗位职责范文
2014/02/17 职场文书
学校机关党总支领导班子整改工作方案
2014/10/26 职场文书
《水上飞机》教学反思
2016/02/20 职场文书
授权协议书范本(3篇)
2019/10/15 职场文书
java设计模式--原型模式详解
2021/07/21 Java/Android