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

最新推荐文章于 2022-09-23 16:33:24 发布

原创最新推荐文章于 2022-09-23 16:33:24 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#java #数据仓库 #jquery

前端专栏收录该内容

14 篇文章

订阅专栏

在处理异步请求时，如果使用JQuery的append方法添加HTML标签，然后立即尝试使用选择器选择这些新添加的标签，可能会失败。这是因为JQuery的选择器在页面加载时就已经执行，而异步请求是在之后完成的。解决这个问题的方法是将选择器操作放在ajax请求的success回调函数的最后，以确保在选择器执行时，新内容已经被添加到DOM中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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()
		}