JS delegate与live浅析

在jquery里有两个方法可以用来绑定自动追加出来的ＤＯＭ对象，它们是live和delegate，事实上，这两个方法是bind方法的一个变体，在对于固定ＤＯＭ对象时，我们通常使用bind就可以了，而对象动态产生的ＤＯＭ对象，使用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());
            });

下面的ＤＥＭＯ的完成代码：

代码如下:

<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>

赞 (0)

相关推荐

  • Query中click(),bind(),live(),delegate()的区别

    click(),bind(),live()都是执行事件时使用的方法,他们之前是有一些区别的,我们在使用这些方法时应该根据需要进行选择. 1.click()方法是我们经常使用的单击事件方法: 复制代码 代码如下: $("a").click(function(){   alert("hello");}); 当点击<a>时,输出hello. 2.click()方法是bind()方法的一种简单方法.在bind()中,jQuery所有JavaScript事件对象,

  • jQuery中的.bind()、.live()和.delegate()之间区别分析

    jQuery中的.bind()、.live()和.delegate()之间区别分析

    DOM树 首先,可视化一个HMTL文档的DOM树是很有帮助的.一个简单的HTML页面看起来就像是这个样子: 事件冒泡(又称事件传播) 当我们点击一个链接时,其触发了链接元素的单击事件,该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行. 复制代码 代码如下: $('a').bind('click',function(){alert('that tickles!')}) 因此一个单击操作会触发alert函数的执行. click事件接着会向树的根方向传播,广播到父元素,然后接着是每个祖先元素

  • JS delegate与live浅析

    在jquery里有两个方法可以用来绑定自动追加出来的DOM对象,它们是live和delegate,事实上,这两个方法是bind方法的一个变体,在对于固定DOM对象时,我们通常使用bind就可以了,而对象动态产生的DOM对象,使用bind就无能为力了,这时live和delegate就出场了,呵呵. live方法,用来绑定某个(某类)对象,为它们绑定方法 复制代码 代码如下:    //live            $("td").live("click", func

  • 前端框架Vue.js构建大型应用浅析

    前端框架Vue.js构建大型应用浅析

    真正的模块化 前端模块化很早就开始了,无论是 require.js,browserify 进行模块化打包, 还是 Angular 进行依赖注入,我们都可以把JS代码分成一个个小的模块并组装起来.然后我们还会通过 less 或者 sass 来把CSS文件也拆成一个个小的模块来写,甚至我们在CSS代码中感受到了 封装,继承,多态 等面向对象的特性. 然而,在 webpack 出来之前,我们所谓的模块化根本不能算作模块化.为什么这么讲,因为我们存在一个重要的问题没有解决,就是JS模块对CSS模块的依赖

  • js跨域问题浅析及解决方法优缺点对比

    什么是跨域? 概念:只要协议.域名.端口有任何一个不同,都被当作是不同的域. 复制代码 代码如下: URL                      说明       是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一域名下不同文件夹 允许 http://www.a.com:8000/a.js http://www

  • JS简单动画封装浅析

    网上也有很多封装好的JS动画库,但大多因为功能过于完善,而至于代码量大动辄过千行,不宜在小项目中使用.这里自己封装了一个很轻量的动画库,主要功能都已实现.难免有疏漏之处,还请大家多多指教. 这里先说明一下功能和用法,以及注意点,随后是一个很简单的可运行示例. 用法及注意事项: anim(elemId, cssObj, time, animType, funObj) 参数说明: elemId (必选)需要施加动画效果的元素id cssObj (必选)动画结束时的样式,对象类型,键值对形式, 其中键

  • 简易Vue评论框架的实现(父组件的实现)

    最近看到一个需求: 实现一个评论功能,要求对评论列表进行分页显示 对相应模块实现组件化 能显示发布者.发布时间以及内容 乍一看不是很难,但是在具体的实现上还是遇到了一些问题.此外,因为第一次使用 vue ,看文档看的也是一脸懵逼,话不多说,下面来分析一下,具体每个模块是怎么实现的. 源码地址 评论表单代码: <!-- 文档结构区开始 --> <template> <div id="comment" > <UserDiv @transferUse

  • 浅析JS原型继承与类的继承

    我们先看JS类的继承 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JS类的继承</title> </head> <body> /* -- 类式继承 -- */ <script type="text/javascript"> //先声明一个超类 var Animal = function

  • 浅析JS中常用类型转换及运算符表达式

    JS中的常用类型转换(一般用强制转换): 1.强制转为整数:parseInt:写法:x = parseInt(x); 2.强制转换位小为:parseFloat:写法:x = parseFloat(x); 3.检测类型:x = parseInt(x);       alert(typeof(true)); JS中常用的运算符表达式: 1.逻辑运算符(布尔型):&& 并 :|| 或 :! 非 : 2.比较运算符:==(等于) :!=(不等于) : > :< :>=(大于等于)

  • 浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结

    1.map 有返回值,返回一个新的数组,每个元素为调用func的结果. let list = [1, 2, 3, 4, 5]; let other = list.map((d, i) => { return d * 2; }); console.log(other); // print: [2, 4, 6, 8, 10] 2.filter 有返回值,返回一个符合func条件的元素数组 let list = [1, 2, 3, 4, 5]; let other = list.filter((d,

  • 浅析JS操作DOM的一些常用方法

    getElementById(): 获取有指定惟一ID属性值文档中的元素 getElementsByName(name): 返回的是数组 getElementsByTagName(): 返回具有指定标签名的元素子元素集合 getAttribute(): 返回指定属性名的属性值 document.getElementsByTagName("a")[0].getAttribute("target"); setAttribute(): 添加指定的属性,并为其赋指定的值.

  • 浅析JS动态创建元素【两种方法】

    浅析JS动态创建元素【两种方法】

    前言: 创建元素有两种方法 1)将需要创建的元素,以字符串的形式拼接:找到父级元素,直接对父级元素的innnerHTML进行赋值. 2)使用Document.Element对象自带的一些函数,来实现动态创建元素(创建元素 => 找到父级元素 => 在指定位置插入元素) 一.字符串拼接形式 为了更好的理解,设定一个应用场景. 随机生成一组数字,将这组数据渲染为条形图的形式,放在div[id="container"]中,如下图 <div id="containe

随机推荐