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 申明函数的三种方法 每个函数就是一个对象(一)
Dec 04 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
Aug 20 Javascript
js querySelector和getElementById通过id获取元素的区别
Apr 20 Javascript
jQuery实用函数用法总结
Aug 29 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
Sep 21 Javascript
浅谈javascript 迭代方法
Jan 21 Javascript
javascript封装 Cookie 应用接口
Aug 07 Javascript
javascript html5 canvas实现可拖动省份的中国地图
Mar 11 Javascript
JS实现给数组对象排序的方法分析
Jun 24 Javascript
微信小程序-API接口安全详解
Jul 16 Javascript
layui多图上传实现删除功能的例子
Sep 23 Javascript
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
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
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
解决phpmyadmin中缺少mysqli扩展问题的方法
2013/05/06 PHP
在b/s开发中经常用到的javaScript技术
2006/08/23 Javascript
用正则表达式 动态创建/增加css style script 兼容IE firefox
2009/03/10 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
2013/01/20 Javascript
获取内联和链接中的样式(js代码)
2013/04/11 Javascript
js操作checkbox遇到的问题解决
2013/06/29 Javascript
jQuery中获取checkbox选中项等操作及注意事项
2013/11/24 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
Javascript中数组sort和reverse用法分析
2014/12/30 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
2015/04/30 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
2015/11/15 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
基于jQuery Tipso插件实现消息提示框特效
2016/03/16 Javascript
JavaScript数据类型转换的注意事项
2016/07/31 Javascript
动态JavaScript所造成一些你不知道的危害
2016/09/25 Javascript
详解Vue源码学习之callHook钩子函数
2018/07/25 Javascript
element ui 表格动态列显示空白bug 修复方法
2018/09/04 Javascript
使用ng-packagr打包Angular的方法示例
2018/09/21 Javascript
详解vue后台系统登录态管理
2019/04/02 Javascript
npm的lock机制解析
2019/06/20 Javascript
如何在项目中使用log4.js的方法步骤
2019/07/16 Javascript
Vue组件间数据传递的方式(3种)
2020/07/13 Javascript
python字典基本操作实例分析
2015/07/11 Python
利用Python命令行传递实例化对象的方法
2016/11/02 Python
Python探索之实现一个简单的HTTP服务器
2017/10/28 Python
python实现五子棋小游戏
2020/03/25 Python
Django Admin中增加导出Excel功能过程解析
2019/09/04 Python
np.random.seed() 的使用详解
2020/01/14 Python
Python生成器实现简单&quot;生产者消费者&quot;模型代码实例
2020/03/27 Python
详解HTML5常用的语义化标签
2019/09/27 HTML / CSS
会计专业个人求职信范文
2014/01/08 职场文书
语文教学感言
2014/02/06 职场文书
《记承天寺夜游》教学反思
2014/02/16 职场文书
Vue和Flask通信的实现
2021/05/19 Vue.js