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自然分类法算法实现代码
Oct 11 Javascript
JS根据变量保存方法名并执行方法示例
Apr 04 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
May 08 Javascript
让IE8浏览器支持function.bind()方法
Oct 16 Javascript
jQuery使用$.ajax提交表单完整实例
Dec 11 Javascript
微信小程序 绘图之饼图实现
Oct 24 Javascript
移动端脚本框架Hammer.js
Dec 15 Javascript
手机软键盘弹出时影响布局的解决方法
Dec 15 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
Jul 19 Javascript
使用react实现手机号的数据同步显示功能的示例代码
Apr 03 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
Aug 31 Javascript
如何基于javascript实现贪吃蛇游戏
Feb 09 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
Godaddy空间Zend Optimizer升级方法
2010/05/10 PHP
php 计算两个时间相差的天数、小时数、分钟数、秒数详解及实例代码
2016/11/09 PHP
JS中彻底删除JSON对象组成的数组中的元素
2020/09/22 PHP
jQuery的强大选择器小结
2009/12/27 Javascript
JS分页效果示例
2013/10/11 Javascript
div模拟滚动条效果示例代码
2013/10/16 Javascript
关于网页中的无缝滚动的js代码
2016/06/09 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
2016/06/17 Javascript
js中document.referrer实现移动端返回上一页
2017/02/22 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
2017/04/12 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
2017/04/14 Javascript
解析vue data不可以使用箭头函数问题
2018/07/03 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
2018/07/24 Javascript
layer弹出层父子页面事件相互调用方法
2018/08/17 Javascript
vue-router的两种模式的区别
2019/05/30 Javascript
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
[01:13:51]TNC vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[49:08]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
python连接mysql数据库示例(做增删改操作)
2013/12/31 Python
python list使用示例 list中找连续的数字
2014/01/27 Python
Python使用Windows API创建窗口示例【基于win32gui模块】
2018/05/09 Python
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
Python引用计数操作示例
2018/08/23 Python
[机器视觉]使用python自动识别验证码详解
2019/05/16 Python
Django实现从数据库中获取到的数据转换为dict
2020/03/27 Python
Python日志处理模块logging用法解析
2020/05/19 Python
Keras设定GPU使用内存大小方式(Tensorflow backend)
2020/05/22 Python
python单元测试框架pytest的使用示例
2020/10/07 Python
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
缓解脚、腿和背部疼痛:Z-CoiL鞋
2019/03/12 全球购物
SOKOLOV官网:俄罗斯珠宝首饰品牌
2021/01/02 全球购物
预防煤气中毒方案
2014/06/16 职场文书
关于读书的演讲稿400字
2014/08/27 职场文书
2015年大班保育员工作总结
2015/05/18 职场文书
主婚人致辞精选
2015/07/28 职场文书
2016年五一劳动节专题校园广播稿
2015/12/17 职场文书