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="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的更多相关文章
- koa源码分析
最近项目要使用koa,所以提前学习一下,顺便看了koa框架的源码. 注:源码是koa2.x koa的源码很简洁,关键代码只有4个文件,当然还包括一些依赖npm包 const Koa = require ...
- webpack练手项目之easySlide（二）：代码分割
Hello,大家好. 在上一篇 webpack练手项目之easySlide(一):初探webpack 中我们一起为大家介绍了webpack的基本用法,使用webpack对前端代码进行模块化打包. 但 ...
- 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...
- 使用live delegate on解决js后装html故障问题
今天写一个前端的东西.每学到更多的知识.几下就能写几行代码.代码行数十个.代码几个文件量--这是真的.一直以来研究的前端遇到的问题仍然在实践百度谷歌问答. 我今天遇到这样的问题:已经写js代码,正确a ...
- 关于js模拟c#的Delegate(委托)实现
这是我的第一篇博文,想来讲一讲js的函数.我的标题是js模拟c#的Delegate. 一.什么是Delegate(委托) 在jquery中有delegate函数,作用是将某个dom元素的标签的事件委托 ...
- js的delegate回调例子
暂时没发现有具体的实际用处,先记录下 <!DOCTYPE html> <html> <head lang="en"> <meta char ...
- js之 matches （可以取代jq的 delegate 方法）
问题:请给#wrap 下面的子元素添加点击事件! <div id="wrap"> <a class="btn" href="http ...
- jquery textSearch实现页面搜索 注意！！！！调用这个插件后，js事件绑定如，on、bind、live delegate全部失效，折腾了我一整天！！！
今天我们介绍的这个插件来着http://www.zhangxinxu.com/wordpress/,张鑫旭的文章写得挺好的,大家有兴趣的多看看. 我们今天的这个插件叫“jquery.textSearc ...
- delegate:动态绑定js事件
$('.videomodule').delegate("span", "click", function() { var i = $(this).index() ...
随机推荐
- poj 3616 Milking Time（dp）
Description Bessie ≤ N ≤ ,,) hours (conveniently labeled ..N-) so that she produces as much milk as ...
- ubuntu 右键新建文档
第一步.创建一个空白doc文档. 一定要是空白的,然后保存(另存为)到桌面,注意细节:1.保存到你能找到的地方,最好是桌面,以方便第二步拖动 2.注意下方的 “文件类型”,要选择doc格式. 3.注意 ...
- 机房收费系统合作版（三）——UI思索
案件追踪系统1.0暂告一段落.验收过程中.MR MI针对UI界面提出了很多自己的想法. 针对TGB项目的UI设计我也有我的感受: 1.不论大小项目.仅仅要一看界面准有70%到80%熟悉度. 2.一看这 ...
- Android窗口管理服务WindowManagerService对壁纸窗口（Wallpaper Window）的管理分析
文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/8550820 Android系统中,壁纸窗口和输 ...
- 免费自学Cocos2d-x3.0final2014原创视频教程（56集）(适用于Cocos2d-x3.1 Cocos2d-x3.2版本号全)
Cocos2d-x3.0final(适用于Cocos2d-x3.1 Cocos2d-x3.2版本号全) 视频播放地址:http://yun.itxdl.cn/course/62 视频下载地址:http ...
- Git 提供篇
1. Git自动补全 假使你使用命令行工具运行Git命令,那么每次手动输入各种命令是一件很令人厌烦的事情.为了解决这个问题,你可以启用Git的自动补全功能,完成这项工作仅需要几分钟. 为了得到这个脚本 ...
- 获取被选择的radio的值
function selectRadio() { var val = $('input:radio[name="address_select"]:checked').val(); ...
- CentOS6.5 --安装orale 11g(下)
(7) 建立Oracle系统用户和安装目录 创建一个主组oinstall和一个副组dba.命令如下: groupadd oinstall groupadd dba 创建oracle安装文件 m ...
- .Net+EF连接Oracle 10、11 开发，ODAC安装配置与使用详解
Oracle数据访问组件 (ODAC) 全称:Oracle Data Access Components 优点:由于微软在.net framework4中会将System.Data.OracleCl ...
- node 安装express
环境:win7 64位旗舰版 1 安装nodejs 2 安装npm 3 安装express 重点介绍安装express,前提是你已经安装nodejs和npm了. 1 安装express npm ins ...