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 相关文章推荐
vs2003 js文件编码问题的解决方法
Mar 20 Javascript
JavaScript导出Excel实例详解
Nov 25 Javascript
js实现图片漂浮效果的方法
Mar 02 Javascript
JS定义网页表单提交(submit)的方法
Mar 20 Javascript
详解JS-- 浮点数运算处理
Nov 28 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
Jan 17 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
Nov 06 Javascript
Vue 换肤的示例实践
Jan 23 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
Aug 30 Javascript
js字符串处理之绝妙的代码
Apr 05 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
Jul 20 Javascript
vue中可编辑树状表格的实现代码
Oct 31 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
url decode problem 解决方法
2011/12/26 PHP
PHP类与对象中的private访问控制的疑问
2012/11/01 PHP
编译php 5.2.14+fpm+memcached(具体操作详解)
2013/06/18 PHP
php基于GD库画五星红旗的方法
2015/02/24 PHP
[原创]PHP字符串中插入子字符串方法总结
2016/05/06 PHP
PDO::rollBack讲解
2019/01/29 PHP
InnerHtml和InnerText的区别分析
2009/03/13 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
2013/06/12 Javascript
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
Javascript数组与字典用法分析
2014/12/13 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
2015/08/25 Javascript
Jquery easyui 实现动态树
2015/11/17 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
2016/05/18 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
基于BootStrap的前端分页带省略号和上下页效果
2017/05/18 Javascript
vee-validate vue 2.0自定义表单验证的实例
2018/08/28 Javascript
node.js之基础加密算法模块crypto详解
2018/09/11 Javascript
利用python微信库itchat实现微信自动回复功能
2017/05/18 Python
python 经典数字滤波实例
2019/12/16 Python
python实现最速下降法
2020/03/24 Python
Scrapy框架介绍之Puppeteer渲染的使用
2020/06/19 Python
12个不为大家熟知的HTML5设计小技巧
2016/06/02 HTML / CSS
造型师求职自荐信
2013/09/27 职场文书
中英双版中文教师求职信
2013/10/27 职场文书
初中生个人学习的自我评价
2013/12/04 职场文书
寒假思想汇报
2014/01/10 职场文书
小学教师管理制度
2014/01/18 职场文书
圣诞节红领巾广播稿
2014/02/03 职场文书
运动会入场词100字
2014/02/06 职场文书
双拥工作宣传标语
2014/06/26 职场文书
雷锋式好少年事迹材料
2014/08/17 职场文书
罚款通知怎么写
2015/04/22 职场文书
工人先锋号事迹材料(2016精选版)
2016/03/01 职场文书
学习nginx基础知识
2021/09/04 Servers