在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="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. python list 去重

    print u'列表去重'a=[1,2,3,3,2,1,4,4,5,6,'a','a','b','c']print list(set(a))

  2. java项目获取路径的几种方式

    第一种: File f = new File(this.getClass().getResource("/").getPath()); System.out.println(f); ...

  3. [core java学习笔记][第十一章异常断言日志调试]

    第11章 异常,断言,日志,调试 处理错误 捕获异常 使用异常机制的技巧 使用断言 日志 测试技巧 GUI程序排错技巧 使用调试器 11.1 处理错误 11.1.1异常分类 都继承自Throwable ...

  4. git学习笔记(五)

    ---恢复内容开始--- 嗯 今天又看到一个非常不错的入门git教程 Mark一下 阮一峰Git操作详解 主要讲解了五个常用的git命令 git clone git remote git fetch ...

  5. java Object 类

    Object o=new Object(); 其中有两个受保护的方法:             1.protected void finalize()             2.protected ...

  6. FLASH图片上传功能—从百度编辑器UEditor里面提取出来

    为了记录工作中碰到的各种问题,以及学习资料整理,今天开始,将以往的文章进行了一个整理,以后也开始认真的记录学习过程中的各种问题 在HTML里面的文件上传功能一直是个问题,为了实现上传文件大小限制,怎样 ...

  7. iOS开发 ~应用程序设计理念:视图控制器(UIViewController)、视图(UIView)

    应用程序设计理念:视图控制器(UIViewController).视图(UIView) 利用视图控制器(底层)管理视图(外观),一对一 1.视图的作用:负责显示的外观 2.视图控制器的作用:创建界面. ...

  8. UIImageView 一些属性设置

    1.contentMode属性 这个属性是用来设置图片的显示方式,如居中.居右,是否缩放等,有以下几个常量可供设定: UIViewContentModeScaleToFill UIViewConten ...

  9. (转) 学习C++ -> 向量(vector)

      vector是向量类型,它是一种对象实体,具有值,所以可以看作是变量. 它可以容纳许多其他类型的相同实体,如若干个整数,所以称其为容器.   vector类与一般的Array类的区别在于:   1 ...

  10. VS代码清理批处理

    批处理清理VS工程 del /f /q /s *.ncb del /f /q /s *.sdf del /f /q /s /A H *.suo del /f /q /s *.ipch del /f / ...