手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >JS delegate与live浅析
JS delegate与live浅析
摘要:在jquery里有两个方法可以用来绑定自动追加出来的DOM对象,它们是live和delegate,事实上,这两个方法是bind方法的一个变体...

在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="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>

【JS delegate与live浅析】相关文章:

Javascript获取统一管理的提示语(message)

使用node+vue.js实现SPA应用

js中setTimeout()与clearTimeout()用法实例浅析

JavaScript中exec函数用法实例分析

静态的动态续篇之来点XML

JavaScript判断图片是否已经加载完毕的方法汇总

与ClientWidth有关的一点资料

JavaScript中的私有成员

JavaScript操作Cookie方法实例分析

JS实现动态生成表格并提交表格数据向后端

精品推荐
分类导航