操作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()。详细说明参考
