javascript - 我的 HTML Div 元素在页面加载时立即消失

Question

我正在通过 AJAX 获取 HTML 元素并动态添加到 DIV 元素。问题是有时 DIV 被正确加载，但有时它变成空白并且在 DIV 元素上什么也不显示，即使数据在浏览器中正确记录但没有显示。我附上了问题截图的链接，以便更好地理解。

Page loaded for first time

Page refreshed several times and data appears

Data disappears again when page is refreshed but AJAX is fetching the html code correctly

//////fetch table from database 
var getTable = function (id, value, tableId, context){

			$.ajax({
				url:'getJSON.php',
				type:'POST',
				dataType: 'json',
				data:id+"="+value,
				success:function(data){
					
				
				console.log(data);
				
				///////////////table/////////////
					
				if(data.length>0)
				{
	  				var table = $('#'+tableId).
	  							dataTable({
	  								"pageLength": 5,
	  								"lengthChange": false
	  							});
	  				var row,cell;
					var count = Object.keys(data[0]).length;
	 			

	 			 for(i=0;i<data.length;i++){
					
	 	  			if(context.toLowerCase()==="classenroll")
	 	  			{
	 	  				table.fnAddData([
                                    data[i].CODE,
									data[i].NAME
					   ]);	

					}

					if (context.toLowerCase()==="showmodifyassign") {

						table.fnAddData([
						
		   					 data[i].TITLE,
					
							 data[i].DESCRIPTION,

							 data[i].DEADLINE,

							 data[i].NAME,
							
							 "<a href=\"#\">Edit</a>"
							
						]);
						
						
					}


					if (context.toLowerCase()==="submittedassignments") {

						table.fnAddData([
							
							data[i].STUDENT_ID,
							
							data[i].FULL_NAME,
							
							data[i].CLASS_NAME,

							data[i].TITLE,

							data[i].DEADLINE,

							data[i].SUBMISSION_DATE,

							"<a href = "+data[i].FILENAME+">"+"Download Now"+"</a>"
						]);

					}

					if (context.toLowerCase()==="showdueassignments") {

						table.fnAddData([

							data[i].TNAME,

							data[i].TITLE,

							data[i].POSTINGDATE,

							data[i].DEADLINE,

							"<a target=\"_blank\" href = \"submit.php\">Submit</a>"
						]);
						
					}

					if (context.toLowerCase()==="modifyclass") {


						table.fnAddData([

							data[i].CODE,

							data[i].NAME,

							data[i].DESCRIPTION,

							"<a href = \"#\">Edit</a>"
						]);
						
					}

					
				
			}
				/////////////////////////////////////////////////
		}
	}
});
	


  }


///code for the dynamic navbar

$("#wb_element_section_teacher").ready(function(e){
  		
  		getForm("homeTeacher");
  		getTable($("#hTeacherTitle").val(),$("#hTeacherId").val(),"newAssignTable","submittedAssignments");
		topMargin(0);
	

	});
	
	$('body').on('click', '#teacherHome', function(){
	        
	        getForm("homeTeacher");	            
      		getTable($("#hTeacherTitle").val(),$("#hTeacherId").val(),"newAssignTable","submittedAssignments");
            tempHeight=650;
    		$("#wb_element_section_teacher").css('height',tempHeight+'px');
    		topMargin(tempHeight-divHeight);
      	return false;
    });

    
    $('body').on('click', '#createAssign', function(){
    		
    		getForm("createAssign");
    	 	tempHeight=650;
    		$("#wb_element_section_teacher").css('height',tempHeight+'px');
    		topMargin(tempHeight-divHeight);
    	return false;
    });
    

    $('body').on('click', '#modifyAssign', function(){
    	
    		getForm("modifyAssign");
    		tempHeight=950;
    		getTable("showMod","somevalue","modAssign","showmodifyassign");
    		$("#wb_element_section_teacher").css('height',tempHeight+'px');
    		topMargin(tempHeight-divHeight);
    	return false;
    });

     
     $('body').on('click', '#createClass', function(){
    		getForm("createClass");
    		tempHeight=650;
    		$("#wb_element_section_teacher").css('height',tempHeight+'px');
    		topMargin(tempHeight-divHeight);
    	return false;
    });
     

     $('body').on('click', '#modifyClass', function(){
    	getForm("modifyClass");
    	getTable("modClass","somevalue","modClass","modifyclass");
    	tempHeight=1000;
    	$("#wb_element_section_teacher").css('height',tempHeight+'px');
    	topMargin(tempHeight-divHeight);	
    return false;
    });

$("#wb_element_section_teacher").ready(function(){
  		
  		getForm("homeStudent");
  		getTable("due","somevalue","dueAssignments","showdueassignments"); 
	topMargin(0);

});
}  

$('body').on('click', '#homeStudent', function(){
        
        getForm("homeStudent");	  
        getTable("due","somevalue","dueAssignments","showdueassignments");          
        tempHeight=650;
		$("#wb_element_section_teacher").css('height',tempHeight+'px');
		topMargin(tempHeight-divHeight);
  	return false;
});


$('body').on('click', '#enrollClasses', function(){
		
		getForm("enrollClasses");
	 	tempHeight=650;
		$("#wb_element_section_teacher").css('height',tempHeight+'px');
		topMargin(tempHeight-divHeight);
	return false;
});


  $('body').on('click', '#viewEnrolled', function(){
		getForm("viewEnrolled");
		getTable($("#hStudentTitle").val(),$("#hStudentId").val(),"enrolledClassesTable","classEnroll");
		tempHeight=650;
		$("#wb_element_section_teacher").css('height',tempHeight+'px');
		topMargin(tempHeight-divHeight);
	return false;
});

$('body').on('click', '#viewSent', function(){
	
		getForm("viewSent");
		getTable("sent","somevalue","sentAssignments","showsentassignments");
		tempHeight=950;
		$("#wb_element_section_teacher").css('height',tempHeight+'px');
		topMargin(tempHeight-divHeight);
	return false;
});

   

   ///////////

////JS to fetch the Elements (HTML)
getForm = function (userType){

  	$.ajax({

  		url: "forms.php",
  		type:"POST",
  		data:"type="+userType,
  		success:function(data){
  			console.log(data);
  			$("#wb_element_section_teacher").html(data);
  			return true;
  		}

  	});

  }

<!--
In Javascript code:

hTeacherTitle.val() = "TEACHER_ID";
hTeacherId.val()=(Integer value) ID of the teacher returned from the Database;

-->




<!-- Code that is fetched when page loads-->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed " data-toggle="collapse" data-target="#navItems" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="glyphicon glyphicon-th-list"></span> </button>
</div>
<div id="navigation" class="col-md-12 ">

<ul class="nav nav-pills navbar-default collapse navbar-collapse nav-justified" id="navItems" >

  		<li id="teacherHome"><a href="#" class="navbar-text">Home</a></li>
  		<li id="createAssign"><a href="#" class="navbar-text">Create Assignment</a></li>
    	<li id="modifyAssign"><a href="#" class="navbar-text">Modify Assignments</a></li>
    	<li id="createClass"><a href="#" class="navbar-text">Create Class</a></li>
        <li id="modifyClass"><a href="#" class="navbar-text">Modify Class</a></li>
     

</ul>

</div>

<div class="container-fluid" style="margin-top:10%;"> <center><h3>New Assignments</h3></center>
</div>
<div id="newAssign">
	<table id="newAssignTable" class="table table-bordered table-striped">
 
		<thead>
  <tr>
		  <th>Student\'s ID</th>
      <th>Student\'s Name</th>
      <th>Class Name</th>
      <th>Assignment Title</th>
      <th>Due Date</th>
      <th>Submission Date</th>
      <th>Download</th>
		</tr> 
    </thead>
   
    <tbody>
    </tbody>
 
	</table>



</div>

Answer 1

您是否尝试在 DOM 准备就绪时通过 Ajax 加载此 HTML？也许尝试使用 $(document).ready() 而不是 $("#wb_element_section_teacher").ready()。