jQuery如何操作ajax等后加载的未来元素？
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 ").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 ",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手册或者谷歌/百度。
页:
[1]