操作ajax生成页面的一个问题

一般而言，js代码都放在页面的底部。在做项目的过程中，发现放在底部的代码没有执行，原来操作的是ajax生成的部分。这时候，页面加载js的顺序就要小心了。例子如下：

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
	<div id="ajaxContent"></div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
	var param1="";
	 var html = ''; 
	 $.ajax({
             type: "post",
             url: "test.json",
             data: {username:$("#username").val(), content:$("#content").val()},
             dataType: "param1="+param1,
             success: function(data){
                         $.each(data, function(commentIndex, comment){
                               html += '<div class="comment"><h6>' + comment['username']
                                         + ':</h6><p class="para"' + comment['content']
                                         + '</p></div>';
                         });
                         $('#ajaxContent').append(html);
                      }
         });
		 
		 //操作ajax部分
		 $('.comment').css('color','red');
</script>
</body>
</html>

　　

Ajax没有完成，这时候，页面元素还不完整，操作ajax生成部分的代码其实已经执行了，而jquery没有选中页面元素又不会报错，参见：http://www.cnblogs.com/xiaochongchong/p/5497343.html 。

解决方法：把底部的代码封装成一个函数，然后等待ajax请求成功，页面生成完整后。后调用这个函数。对上面例子的稍加修改：

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
	<div id="ajaxContent"></div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
	 var param1="";
	 var html = '';
	 
	 //ajax请求 
	 $.ajax({
             type: "post",
             url: "test.json",
             data: {username:$("#username").val(), content:$("#content").val()},
             dataType: "param1="+param1,
             success: function(data){
                         $.each(data, function(commentIndex, comment){
                               html += '<div class="comment"><h6>' + comment['username']
                                         + ':</h6><p class="para"' + comment['content']
                                         + '</p></div>';
                         });
                         $('#ajaxContent').append(html);
						 //append成功后操作生成的部分
						 operate();
                      }
         });
		 
		 //操作ajax部分，封装函数
		 function operate(){
		 $('.comment').css('color','red');
		 }
</script>
</body>
</html>

　　

总结：js操作ajax生成的部分。操作的代码，应该放页面生成之后。

如果要对ajax生成的部分添加事件。除了上面的做法：在ajax数据获取到，append到整个页面中之后再添加。除此之外，还可以用事件代理的方法实现，原生js的可以实现，jquery也可以实现。

Jquery事件代理（委托）主要用到两个方法：live()，delegate()。详细说明参考

http://blog.csdn.net/xxd851116/article/details/8646899

posted @ 2016-05-20 14:17  小虫1  阅读(541)  评论(0)    收藏  举报