在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="http://common.cnblogs.com/script/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': '', 'UserName': 'zhang', 'UserID': '' }[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="">

        <tbody>

        </tbody>

    </table>

</body>

</html>

JS~delegate与live的更多相关文章

  1. koa源码分析

    最近项目要使用koa,所以提前学习一下,顺便看了koa框架的源码. 注:源码是koa2.x koa的源码很简洁,关键代码只有4个文件,当然还包括一些依赖npm包 const Koa = require ...

  2. webpack练手项目之easySlide（二）：代码分割

    Hello,大家好. 在上一篇 webpack练手项目之easySlide(一):初探webpack  中我们一起为大家介绍了webpack的基本用法,使用webpack对前端代码进行模块化打包. 但 ...

  3. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

  4. 使用live delegate on解决js后装html故障问题

    今天写一个前端的东西.每学到更多的知识.几下就能写几行代码.代码行数十个.代码几个文件量--这是真的.一直以来研究的前端遇到的问题仍然在实践百度谷歌问答. 我今天遇到这样的问题:已经写js代码,正确a ...

  5. 关于js模拟c#的Delegate(委托)实现

    这是我的第一篇博文,想来讲一讲js的函数.我的标题是js模拟c#的Delegate. 一.什么是Delegate(委托) 在jquery中有delegate函数,作用是将某个dom元素的标签的事件委托 ...

  6. js的delegate回调例子

    暂时没发现有具体的实际用处,先记录下 <!DOCTYPE html> <html> <head lang="en"> <meta char ...

  7. js之 matches （可以取代jq的 delegate 方法）

    问题:请给#wrap 下面的子元素添加点击事件! <div id="wrap"> <a class="btn" href="http ...

  8. jquery textSearch实现页面搜索 注意！！！！调用这个插件后，js事件绑定如，on、bind、live delegate全部失效，折腾了我一整天！！！

    今天我们介绍的这个插件来着http://www.zhangxinxu.com/wordpress/,张鑫旭的文章写得挺好的,大家有兴趣的多看看. 我们今天的这个插件叫“jquery.textSearc ...

  9. delegate:动态绑定js事件

    $('.videomodule').delegate("span", "click", function() { var i = $(this).index() ...

随机推荐

  1. 设计模式12---设计模式之代理模式（Proxy）（结构型）

    1.场景模拟 考虑这样一个实际应用: HR提出,当选择一个部门或者是分公司的时候,要把所有的分公司下的员工显示出来,而且不要翻页,方便进行业务处理,只需要显示姓名即可,但是点击姓名会出现这位员工的详细 ...

  2. 曾经很长时间不会写的两个SQL语句(group by，having)

    1.统计各部门的平均工资,平均资金(要求同时显示出部门名称,部门编号,部门总人数) SQL)),) 部门平均工资,)),) 部门平均资金 FROM EMP E RIGHT JOIN DEPT D ON ...

  3. Asp.net 网站出现Service Unavailable 问题剖析

    网站出现这样的情况,而且刷新一下又重新正常. 个人分析认为造成原因如下: 1.应用程序池配置存在问题. 2.程序中存在没有关闭的连接数据库对象,或者含有死循环. 3.程序中产生的内存数据量太多,导致网 ...

  4. C# List<T>的详细用法

    所属命名空间:System.Collections.Generic List<T>类是 ArrayList 类的泛型等效类.该类使用大小可按需动态增加的数组实现 IList<T> ...

  5. .Net Memory -- GC基本知识

    参考资料: http://blogs.msdn.com/b/tess/archive/2008/04/17/how-does-the-gc-work-and-what-are-the-sizes-of ...

  6. Struts2体系结构图以及详解

    Strut2的体系结构如图所示: 一个请求在Struts2框架中的处理大概分为以下几个步骤: 1.客户端初始化一个指向Servlet容器(例如Tomcat)的请求: 2.这个请求经过一系列的过滤器(F ...

  7. C++服务器设计（二）：应用层I/O缓冲

    数据完整性讨论 我们已经选择了I/O复用模型作为系统底层I/O模型.但是我们并没有具体解决读写问题,即在我们的Reactor模式中,我们怎么进行读写操作,才能保证对于每个连接的发送或接收的数据是完整的 ...

  8. c++设计模式之状态模式

    一. 状态模式 定义:允许一个对象在其内部状态改变时改变它的行为.对象看起来似乎修改了它的类. 实现方式1: workstate 状态抽象类 workstate1 状态实现类1 workstate2 ...

  9. Window Linux下实现指定目录内文件变更的监控方法

    转自:http://qbaok.blog.163.com/blog/static/10129265201112302014782/ 对于监控指定目录内文件变更,window 系统提供了两个未公开API ...

  10. Java的String&StringBuffer&StringBuilder

    一:String类 1.String对象的初始化 由于String对象特别用,所以在对String对象进行初始化时,Java提供了一种简化的特殊语法,格式如下: String s = "ab ...