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 数值型和字符串型之间的转换
Jul 25 Javascript
Firefox+FireBug使JQuery的学习更加轻松愉快
Jan 01 Javascript
使用Mootools动态添加Css样式表代码,兼容各浏览器
Dec 12 Javascript
javascript验证身份证完全方法具体实现
Nov 18 Javascript
javascript实现rgb颜色转换成16进制格式
Jul 10 Javascript
js实现匹配时换色的输入提示特效代码
Aug 17 Javascript
jQuery实现form表单元素序列化为json对象的方法
Dec 09 Javascript
详解js的异步编程技术的方法
Feb 09 Javascript
angularjs的select使用及默认选中设置
Apr 08 Javascript
jquery实现动态添加附件功能
Oct 23 jQuery
PostgreSQL Node.js实现函数计算方法示例
Feb 12 Javascript
JavaScript遍历DOM元素的常见方式示例
Feb 16 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
如何限制访问者的ip(PHPBB的代码)
2006/10/09 PHP
可以在线执行PHP代码包装修正版
2008/03/15 PHP
twig模板常用语句实例小结
2016/02/04 PHP
Yii控制器中filter过滤器用法分析
2016/07/15 PHP
php unlink()函数使用教程
2018/07/12 PHP
JQuery 将元素显示在屏幕的中央的代码
2010/02/27 Javascript
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
使用JavaScript获取电池状态的方法
2014/05/03 Javascript
可编辑下拉框的2种实现方式
2014/06/13 Javascript
Node.js实现在目录中查找某个字符串及所在文件
2014/09/03 Javascript
javascript通过元素id和name直接取得元素的方法
2015/04/28 Javascript
深入理解jQuery事件绑定
2016/06/02 Javascript
微信小程序实现图片预加载组件
2017/01/18 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
2017/12/18 jQuery
swiper自定义分页器使用方法详解
2020/09/14 Javascript
对Vue beforeRouteEnter 的next执行时机详解
2018/08/25 Javascript
angular.js实现列表orderby排序的方法
2018/10/02 Javascript
Jquery的Ajax技术使用方法
2019/01/21 jQuery
JavaScript的Proxy可以做哪些有意思的事儿
2019/06/15 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
2019/09/25 Javascript
JavaScript缺少insertAfter解决方案
2020/07/03 Javascript
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
Python使用Beautiful Soup包编写爬虫时的一些关键点
2016/01/20 Python
Python通过paramiko远程下载Linux服务器上的文件实例
2018/12/27 Python
python UIAutomator2使用超详细教程
2021/02/19 Python
python 制作网站小说下载器
2021/02/20 Python
基于 HTML5 Canvas实现 的交互式地铁线路图
2018/03/05 HTML / CSS
华为c/c++笔试题
2016/01/25 面试题
旷课检讨书2000字
2014/01/14 职场文书
语文课外活动总结
2014/08/27 职场文书
2015年党员自我剖析材料
2014/12/17 职场文书
小学英语教师研修感悟
2015/11/18 职场文书
创业计划书之香辣虾火锅
2019/09/23 职场文书
css3 实现文字闪烁效果的三种方式示例代码
2021/04/25 HTML / CSS
delete in子查询不走索引问题分析
2022/07/07 MySQL