JQuery ajax使用append添加标签和选择器加载顺序

1.在异步请求回调函数里有时需要添加一些html标签,而此时再使用JQuery选择器选择已添加的标签是选择不到的.

2.这是由于网页在加载时,会优先将JQuery的选择器加载,之后才会加载发起异步请求(可以通过debug验证).因此,如果想要让JQuery选择器生效,则必须保证JQuery加载顺序在异步请求之后.

.1)解决方案一,更换顺序(不成功),record(result)的位置在异步请求后面

$(window).on("load",function(){
	$.ajax({
			url: "/StudentManageSystemAfter/record?action=queryRecordByPage&currentPage="+params.currentPage+"&pageSize="+params.pageSize+"&status=",
			type: "POST",
			contentType: "application/json;charset=utf-8",
			data: JSON.stringify(params),
			dataType: "json",
			success: function (result){
				if(result.flag){
				//添加html标签
					record(result)
				}
			},
			error: function (result){
				alert(XMLHttpRequest.status);
				alert(XMLHttpRequest.responseText);
				alert(XMLHttpRequest.readyState);  
			}
		 })	
		 /**全选、全不选**/
		  $(function() {
			  $("#all_ck").click(function(){
				  if ($(this).is(':checked')) {//全选
					  $("[name=ck]:checkbox").each(function(){
						  this.checked=true;
					  		//$(this).attr("checked",true);
					  });
				  }else{//全不选
					  $("[name=ck]:checkbox").each(function(){
						  this.checked=false;
					  		//$(this).attr("checked",false);
					  });
				  } 
				  
				});
			  	
			});	
})

function record(result){
					var currentPage = result.data.pageParameter.currentPage
					var totalPage = result.data.pageParameter.totalPage
					var totalSize = result.data.pageParameter.totalSize
					var record = result.data.pageParameter.currentPageData
					$("#recordMsg").empty()
					$("#recordMsg").append(
							$(
									"<tr id=\"theTableTitle\">"+
									"<th><input type=\"checkbox\" id=\"all_ck\" /> 审核</th>"+
									"<th>日期</th>"+
									"<th>姓名</th>"+
									"<th>上班打卡时间</th>"+
									"<th>下班打卡时间</th>"+
									"<th>状态</th>"+
									"<th>操作</th>"+
									"</tr>"+
									"<tr name=\"msg\"></tr>"
							)
					)
					for (var i = 0; i < record.length; i++) {
						$("#recordMsg").append(
								$(
										"<tr name=\""+i+"\"></tr>"
								)
						)
						$("#recordMsg [name='"+i+"']").append(
								$(
										
										"<td><input type=\"checkbox\" id=\"ck\" name=\"ck\""+
											"value=\""+record[i].record_id+"\" /></td>"+
										"<td>"+record[i].dateString+"</td>"+
										"<td>"+record[i].stu_name+"</td>"
								)
						)
						
					 }
					otherOpeate()
		}

.  2)解决方案二,record(result)放在success回调函数里的最后面(有效)

$(window).on("load",function(){
	$.ajax({
			url: "/StudentManageSystemAfter/record?action=queryRecordByPage&currentPage="+params.currentPage+"&pageSize="+params.pageSize+"&status=",
			type: "POST",
			contentType: "application/json;charset=utf-8",
			data: JSON.stringify(params),
			dataType: "json",
			success: function (result){
				if(result.flag){
					//添加html标签
					record(result)
					
					 /**全选、全不选**/
		  			$(function() {
			  			$("#all_ck").click(function(){
				  			if ($(this).is(':checked')) {//全选
					  			$("[name=ck]:checkbox").each(function(){
						  			this.checked=true;
					  					//$(this).attr("checked",true);
					  			});
				  			}else{//全不选
					 			 $("[name=ck]:checkbox").each(function(){
						 			 this.checked=false;
					  					//$(this).attr("checked",false);
								  });
				 			 } 
							});
						});	
				}
			},
			error: function (result){
				alert(XMLHttpRequest.status);
				alert(XMLHttpRequest.responseText);
				alert(XMLHttpRequest.readyState);  
			}
		 })	
		
})

function record(result){
					var currentPage = result.data.pageParameter.currentPage
					var totalPage = result.data.pageParameter.totalPage
					var totalSize = result.data.pageParameter.totalSize
					var record = result.data.pageParameter.currentPageData
					$("#recordMsg").empty()
					$("#recordMsg").append(
							$(
									"<tr id=\"theTableTitle\">"+
									"<th><input type=\"checkbox\" id=\"all_ck\" /> 审核</th>"+
									"<th>日期</th>"+
									"<th>姓名</th>"+
									"<th>上班打卡时间</th>"+
									"<th>下班打卡时间</th>"+
									"<th>状态</th>"+
									"<th>操作</th>"+
									"</tr>"+
									"<tr name=\"msg\"></tr>"
							)
					)
					for (var i = 0; i < record.length; i++) {
						$("#recordMsg").append(
								$(
										"<tr name=\""+i+"\"></tr>"
								)
						)
						$("#recordMsg [name='"+i+"']").append(
								$(
										
										"<td><input type=\"checkbox\" id=\"ck\" name=\"ck\""+
											"value=\""+record[i].record_id+"\" /></td>"+
										"<td>"+record[i].dateString+"</td>"+
										"<td>"+record[i].stu_name+"</td>"
								)
						)
						
					 }
					otherOpeate()
		}
上一篇:Java中异常分为哪些种类?


下一篇:Qt开发经验小技巧186-190