jQuery如何操作ajax等后加载的未来元素？

admin · 发表于 2015-1-17 20:37:56

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

x

jQuery如何操作ajax等后加载的未来元素？

本文关键字词：函数live，未来元素，后加载，ajax后操作，jQuery资料

我们在制作网页的时候会遇到ajax等请求的以及动态加载的元素（称作未来的元素），此时发现已经加载的函数无法对未来的元素进行操作，此时该如何处理比较好呢？

答案就是：jQuery的live函数

jQuery 事件 - live() 方法

定义和用法
live() 方法为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）。

语法：
$(selector).live(event,data,function)

参数：
event             必需。规定附加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。
data                可选。规定传递到该函数的额外数据。
function          必需。规定当事件发生时运行的函数。

实例说明：
如何使用 live() 方法向尚未创建的元素添加事件处理器。
Html：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ceshi jquery live</title>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
//点击ajax请求
$("#dianji").click(function(){
$.ajax({
url:"test.txt",
type:"get",
cache:false,
dataType:"html",
success:function(data,status){
$("#table_datas").append(data);
}
});
});
//操作加载后的对象测试
$("#table_datas [class$='_config']").live("click",function(){
a=$(this).text();
alert(a);
});
});
</script>
</head>
<body>
<p>以下为 ajax 加载</p>
<div id="table_datas" style="padding:20px;"><a href="javascript:;" id="dianji">ajax加载test.txt的数据</a></div>
<br /><br /><br /><br />
<p>以下为 html 原有</p>
<div id="other" style="padding:20px;">
<div class='d_config'>d_config</div>
<div class='e_config'>e_config</div>
<div class='f_config'>f_config</div>
</div>
</body>
</html>

复制代码

test.txt：

<br /><a href="javascript:;" class='a_config'>我是Ajax加载的A</a><br />
<a href="javascript:;" class='b_config'>我是Ajax加载的B</a><br />
<a href="javascript:;" class='c_config'>我是Ajax加载的C</a><br />

复制代码

提醒：
live()函数方法只适应于jQuery1.8以下版本.1.8以上版本转换为on()函数。

1.83版本可以这么写：

<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>ceshi jquery live</title>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
//点击ajax请求
$("#dianji").click(function(){
$.ajax({
url:"test.txt",
type:"get",
cache:false,
dataType:"html",
success:function(data,status){
$("#table_datas").append(data);
}
});
});
//操作加载后的对象测试
$(document).on("click","#table_datas [class$='_config']",function(){
a=$(this).text();
alert(a);
});
});
</script>
</head>
<body>
<p>以下为 ajax 加载</p>
<div id="table_datas" style="padding:20px;"><a href="javascript:;" id="dianji">ajax加载test.txt的数据</a></div>
<br /><br /><br /><br />
<p>以下为 html 原有</p>
<div id="other" style="padding:20px;">
<div class='d_config'>d_config</div>
<div class='e_config'>e_config</div>
<div class='f_config'>f_config</div>
</div>
</body>
</html>

复制代码

以上为演示实例。更多资料请参阅JQ手册或者谷歌/百度。

		自动登录	找回密码
密码			立即注册

[实例分享] jQuery如何操作ajax等后加载的未来元素？

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。