jQuery获取动态生成的元素

最新推荐文章于 2021-08-19 01:49:45 发布

转载最新推荐文章于 2021-08-19 01:49:45 发布 · 114 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lxjshuju/p/7290536.html

文章标签：

#javascript #ViewUI

本文介绍如何在网页中动态加载数据，并提供了使用ajaxComplete方法在数据加载完成后获取特定元素值的示例。

需求描写叙述：页面上能够动态加入数据,比方table,点击按钮能够动态加入行。

又或页面

载入时table数据是通过ajax从后台获取的。而这时我们想要获取当中的某个值,又该怎样获取呢？

假设是要通过某个事件来获取的比方click,mouseover等等,则能够使用live()方法

$(".button").live("click",function(){  
     console.info($("#mytd").html());  
})

live()的具体说明參考http://blog.youkuaiyun.com/itmyhome1990/article/details/17380665

而假设不是通过某个事件,当页面载入的时候我们就要获取值或进行其它操作

live()方法就不行了,由于我们无法传入一个事件。

比方下面代码：

<body>
	<table id="tab" border="1" width="30%">
		
	</table>
</body>
<script type="text/javascript">
	$(function() {
	     $.post("admin/UserForumthemeBabygrowupFrontList.do",{},function(data){
		   console.info(data.table);
		   $("#tab").append(data.table);
	     })
		
	     alert($("#mytd").html());	//获取值	
	});
</script>

以上代码非常easy,就是通过post从后台返回的值加入到<table>中

后台返回数据为 <tr><td id='mytd'>北京</td><td>深圳</td></tr>而我们要在post之后获取id为mytd的值,

此时是获取不到的,我们从浏览器中就能够观察出问题：

从以上能够看出在alert的时候数据并还没有载入出来控制台也并没有打印出信息,所以此时是取不到数据的。

使用ajaxComplete()方法能够在请求完毕时运行要运行的代码,我们改动为例如以下：

$(function() {
	$.post("admin/UserForumthemeBabygrowupFrontList.do",{},function(data){
		console.info(data.table);
		$("#tab").append(data.table);
	})
	$("#tab").ajaxComplete(function(){  //待请求完毕时 运行 
		alert($("#mytd").html());
	})
});

此时再获取的时候页面已载入完数据。

转载于:https://www.cnblogs.com/lxjshuju/p/7290536.html