JS~delegate与live
在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的更多相关文章
- 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() ...
随机推荐
- pyQt事件处理
Qt事件处理01 Qt处理事件的第二种方式:"重新实现QObject::event()函数",通过重新实现event()函数,可以在事件到达特定的事件处理器之前截获并处理他们.这种 ...
- Java与面向对象
一.面向过程的思想和面向对象的思想 面向对象和面向过程的思想有着本质上的区别, 作为面向对象的思维来说,当你拿到一个问题时,你分析这个问题不再是第一步先做什么,第二步再做什么,这是面向过程的思维,你应 ...
- python学习之路-6 冒泡算法、递归、反射、os/sys模块详解
算法 冒泡算法 # 冒泡算法就是将需要排序的元素看作是一个个"气泡",最小的"气泡"最先浮出水面,排在最前面.从小到大依次排列. # 代码如下: li = [9 ...
- TCP三次握手的过程
三次握手 下图就是wireshark抓包工具抓获的TCP连接建立的三次握手过程: http://www.cnblogs.com/hnrainll/archive/2011/10/14/2212415. ...
- ERROR 1130: Host is not allowed to connect to this MySQL server
解决远程连接mysql错误1130代码的方法 今天在用远程连接Mysql服务器的数据库,不管怎么弄都是连接不到,错误代码是1130,ERROR 1130: Host 192.168.2.159 is ...
- HTTP协议5之代理--转
代理服务器 Web代理(proxy)服务器是网络的中间实体. 代理位于Web客户端和Web服务器之间,扮演“中间人”的角色. HTTP的代理服务器即是Web服务器又是Web客户端. Fiddler就是 ...
- AngularJS Directive - 开场小介绍(转)
Directive其实就是让html变得更强大的一种方法.它可以根据需求对dom变形,或注入行为. 觉得它很神秘么,其实一点儿也不神秘,只要开始使用AngularJS了,就一定在使用着Directiv ...
- avalon2学习心得(1)
github上,avalon2的项目描述是这样的:“avalon2是一款基于虚拟DOM与属性劫持的 迷你. 易用. 高性能 的 前端MVVM框架, 适用于各种场景, 兼容各种古老刁钻浏览器, 吸收最新 ...
- 纯html网页重定向与跳转
javaScript 跳转 方法一: <script language="javascript"> window.location = "http:// ...
- Socket编程(摘抄)
http://www.blogjava.net 例子代码就在我的博客中,包括六个UDP和TCP发送接受的cpp文件,一个基于MFC的局域网聊天小工具工程,和此小工具的所有运行时库.资源和执行程序.代码 ...