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 相关文章推荐
date.parse在IE和FF中的区别
Jul 29 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
May 31 Javascript
jQuery父级以及同级元素查找介绍
Sep 04 Javascript
js脚本获取webform服务器控件的方法
May 16 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
Jun 02 Javascript
简单谈谈原生js的math对象
Jun 27 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
Nov 07 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
Nov 21 Javascript
js实现无限瀑布流实例方法
Sep 16 Javascript
微信小程序实现分享商品海报功能
Sep 30 Javascript
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
如何在JavaScript中使用localStorage详情
Feb 04 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
如何用phpmyadmin设置mysql数据库用户的权限
2012/01/09 PHP
解决PhpMyAdmin中导入2M以上大文件限制的方法分享
2014/06/06 PHP
php实现修改新闻时删除图片的方法
2015/05/12 PHP
点图片上一页下一页翻页效果
2008/07/09 Javascript
Javascript valueOf 使用方法
2008/12/28 Javascript
广告切换效果(缓动切换)
2009/05/27 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
2013/09/27 Javascript
通过js来制作复选框的全选和不选效果
2014/05/22 Javascript
jQuery实现锚点scoll效果实例分析
2015/03/10 Javascript
代码分析jQuery四种静态方法使用
2015/07/23 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
2016/07/21 Javascript
JavaScript实现的商品抢购倒计时功能示例
2017/04/17 Javascript
jQuery实现基本淡入淡出效果的方法详解
2018/09/05 jQuery
vue实现局部刷新的实现示例
2019/04/16 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
2019/05/07 Javascript
解决layui 三级联动下拉框更新时回显的问题
2019/09/03 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
2019/11/18 Javascript
Python图像灰度变换及图像数组操作
2016/01/27 Python
Python判断列表是否已排序的各种方法及其性能分析
2016/06/20 Python
python中reload(module)的用法示例详解
2017/09/15 Python
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
python爬取m3u8连接的视频
2018/02/28 Python
对python中的argv和argc使用详解
2018/12/15 Python
解决pycharm不能自动补全第三方库的函数和属性问题
2020/03/12 Python
python3 正则表达式基础廖雪峰
2020/03/25 Python
python3.6.8 + pycharm + PyQt5 环境搭建的图文教程
2020/06/11 Python
keras自动编码器实现系列之卷积自动编码器操作
2020/07/03 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
基于Python实现粒子滤波效果
2020/12/01 Python
英国Zoro工具:手动工具,电动工具和个人防护用品
2016/11/02 全球购物
学术会议欢迎词
2014/01/09 职场文书
结婚典礼证婚词
2014/01/11 职场文书
好矿嫂事迹材料
2014/01/21 职场文书
致共产党员倡议书
2014/04/16 职场文书
年会邀请函范文
2015/01/30 职场文书
2015年高校保卫处工作总结
2015/07/23 职场文书