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 相关文章推荐
前台js改变Session的值(用ajax实现)
Dec 28 Javascript
uploadify在Firefox下丢失session问题的解决方法
Aug 07 Javascript
JS实现样式清新的横排下拉菜单效果
Oct 09 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
Oct 25 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
Feb 23 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
Jun 24 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
Jun 17 Javascript
javascript  删除select中的所有option的实例
Sep 17 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 Javascript
JS中队列和双端队列实现及应用详解
Sep 29 Javascript
vue3.0 的 Composition API 的使用示例
Oct 26 Javascript
vscode自定义vue模板的实现
Jan 27 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
mysql5写入和读出乱码解决
2006/11/25 PHP
php中防止伪造跨站请求的小招式
2011/09/02 PHP
php实现文件下载实例分享
2014/06/02 PHP
Zend Framework教程之Zend_Controller_Plugin插件用法详解
2016/03/07 PHP
浅谈PHP中new self()和new static()的区别
2017/08/11 PHP
浅谈thinkphp的nginx配置,以及重写隐藏index.php入口文件方法
2019/10/12 PHP
JS实现网页右侧带动画效果的伸缩窗口代码
2015/10/29 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
2017/01/20 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
2017/01/22 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
2017/01/23 Javascript
Bootstrap Scrollspy源码学习
2017/03/02 Javascript
ES6实现的遍历目录函数示例
2017/04/07 Javascript
利用node.js如何创建子进程详解
2017/12/09 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
2019/07/09 Javascript
Vue-cli项目部署到Nginx服务器的方法
2019/11/01 Javascript
uni-app如何页面传参数的几种方法总结
2020/04/28 Javascript
vue props default Array或是Object的正确写法说明
2020/07/30 Javascript
vue中实现弹出层动画效果的示例代码
2020/09/25 Javascript
[04:39]显微镜下的DOTA2第十三期—Pis卡尔个人秀
2014/04/04 DOTA
对python中list的拷贝与numpy的array的拷贝详解
2019/01/29 Python
Jupyter 无法下载文件夹如何实现曲线救国
2020/04/22 Python
python3中编码获取网页的实例方法
2020/11/16 Python
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
2012/12/10 HTML / CSS
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
将n个数按输入顺序的逆序排列,用函数实现
2012/11/14 面试题
历史学专业毕业生求职信
2013/09/27 职场文书
成人毕业生自我鉴定
2013/10/18 职场文书
个人找工作求职简历的自我评价
2013/10/20 职场文书
工商技校毕业生自荐信
2013/11/15 职场文书
运动会广播稿50字
2014/01/26 职场文书
大专生自我评价
2014/01/28 职场文书
五年级科学教学反思
2014/02/05 职场文书
广告语设计及教案
2014/03/21 职场文书
2014年医院十一国庆节活动方案
2014/09/15 职场文书
用Python实现屏幕截图详解
2022/01/22 Python
PYTHON基于Pyecharts绘制常见的直角坐标系图表
2022/04/28 Python