我通过AJAX获取HTML元素并动态添加到DIV元素。问题是有时正确加载DIV，但有时它会变成空白并且在DIV元素上什么都不显示，即使数据在浏览器中正确记录但没有显示出来。我正在附上问题截图的链接，以便更好地理解。
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>
答案 0 :(得分：0)
当DOM准备就绪时，您是否尝试通过Ajax加载此HTML？也许尝试使用$(document).ready()而不是$("#wb_element_section_teacher").ready()。