我正在使用菜单项上的点击事件来更新div（#App）的内容，我需要填充一个列表，该列表使用JSON数据加载到div中。那里没有问题，我运行了一个执行一些操作的函数，包括用<select>值填充<option>列表，清除div上的类并向ID添加“映射”的适当类导航项的内容，以便我可以使用当前类运行if语句，并更新菜单以反映活动的“页面”。我的问题是，看起来似乎是随机的，列表不会填充，并且控制台记录错误
未捕获的类型错误：空的不能设置属性 '的innerHTML'“
在错误被引用该追加与ID列表我的输出变量schoolSelect。我不知道为什么有时功能运行得很好，有时却不能。这似乎是随机的。如果可以的话，我会以不同的方式进行操作，但是我正在对该应用程序进行一些限制，并且只需要弄清楚为什么会发生这种情况，就可以继续处理JSON数据并做更多的事情。
我尝试不使用jquery而是运行xhttp请求，但是它什么也不做。我尝试将函数放置在不同的位置，并在不同的事件上运行该函数，放置jQuery以获取JSON数据并在click函数中呈现列表，我将其放置在单独的函数中，我似乎无法解决问题后，似乎是随机不触发。
populateList = function() {
$.getJSON("/assets/JSON/schools.JSON", function(result) {
var schools = result.schools;
var output = '';
for (var i = 0; i < schools.length; i++) {
output += '<option>' + schools[i].name + '</option>';
}
document.getElementById('schoolSelect').innerHTML = output;
});
}
populateTable = function() {
$.getJSON("/assets/JSON/schools.JSON", function(result) {
var schools = result.schools;
var output = '';
for (var i = 0; i < schools.length; i++) {
output += '<option>' + schools[0].zones[i].name + '</option>'
}
document.getElementById('zoneSelect').innerHTML = output;
});
}
$(document).ready(function() {
$("#alert").click(function(e) {
if ($("#App").hasClass("alertDashboard")) {
// Do Nothing
} else {
e.stopPropagation();
$("#App").removeClass()
$("#App").addClass("container")
$("#App").load("../html/Dashboards/AlertDashboard.html")
populateList()
$(".menuItem").removeClass("active")
$("#alert").addClass("active")
$("#App").addClass("alertDashboard")
}
})
});
$(document).ready(function() {
$("#chat").click(function(e) {
if ($("#App").hasClass("chatDashboard")) {
// Do Nothing
} else {
e.stopPropagation();
$("#App").removeClass()
$("#App").addClass("container")
$("#App").load("../html/Dashboards/ChatDashboard.html")
populateList()
$(".menuItem").removeClass("active")
$("#chat").addClass("active")
$("#App").addClass("chatDashboard")
}
})
});
$(document).ready(function() {
$("#schoolInfo").click(function(e) {
if ($("#App").hasClass("infoDashboard")) {
// Do Nothing
} else {
e.stopPropagation();
$("#App").removeClass()
$("#App").addClass("container")
$("#App").load("../html/Dashboards/InfoDashboard.html")
populateTable()
$(".menuItem").removeClass("active")
$("#schoolInfo").addClass("active")
$("#App").addClass("infoDashboard")
}
})
})
$(document).ready(function() {
$("#savedData").click(function(e) {
if ($("#App").hasClass("savedDashboard")) {
// Do Nothing
} else {
e.stopPropagation()
$("#App").removeClass()
$("#App").addClass("container")
$("#App").load("../html/Dashboards/SavedDashboard.html")
$(".menuItem").removeClass("active")
$("#savedData").addClass("active")
$("#App").addClass("savedDashboard")
}
})
})<div class="container-fluid">
<div class="sidebar">
<div class="menuItem" style="border-bottom: none;padding:10px;text-align:
center;">
<img src="/assets/images/lockout-logo-white.png" class="app-logo" />
</div>
<div class="menuItem active" id="alert">
Lockdown Alert<img src="/assets/images/lock-alt.svg" />
</div>
<div class="menuItem" id="chat">
Chat<img src="/assets/images/comment-dots.svg" />
</div>
<div class="menuItem" id="schoolInfo">
School Info<img src="/assets/images/school.svg" />
</div>
<div class="menuItem" id="savedData">
Saved Data<img src="/assets/images/save.svg" />
</div>
</div>
</div>
<div class="container alertDashboard" id="App">
<h1>Alert Dashboard</h1>
<div class="row">
<div class="col-md-3 schoolList" id="listDiv">
<div class="listHeader">
<h5>Please select a school</h5>
<p>Hold ctrl to select more than one school</p>
</div>
<select size="100" multiple id="schoolSelect" class="school_select"></select>
<!-- <div id="infoDiv">
<p>Drag the cursor, or hold CTRL to select multiple</p>
</div> -->
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-12">
<!-- <img id="stage2Img" draggable="false"
opacity="0.85"
src="../assets/images/stage_2_up.png"/> -->
<div class="alertStageInner">
<div class="alertHeader">
<img src="/assets/images/stage2Image.png" />
<h2>Alert Level 2</h2>
<h3>Soft Lockdown</h3>
</div>
<div class="alertBody">
<p>
Locks down school due to immediate, non-life threatening situation
</p>
<button id="stage2Div">Initiate Lockdown</button>
</div>
</div>
<!-- <img id="stage3Img" draggable="false" opacity="0.85" src="../assets/images/stage_3_up.png"/> -->
<div class="alertStageInner" style="margin-top: 24px">
<div class="alertHeader">
<img src="/assets/images/stage3Image.png" />
<h2>Alert Level 3</h2>
<h3>Full Lockdown</h3>
</div>
<div class="alertBody">
<p>
Locks down school due to immediate, life threatening situation
</p>
<button id="stage3Div">Initiate Lockdown</button>
</div>
</div>
</div>
<div class="col-md-5"></div>
</div>
</div>
</div>
</div>
</div>
</div>
正如你可能会说，ID为应用程序的DIV是一个由功能的影响。此过程在大多数情况下都有效，但是由于某种原因，有时偶尔会一次，似乎是随机的，它会出错，并且不填充schoolSelect或zoneSelect列表，并且我得到了空错误，如前所述。任何帮助是极大的赞赏。
答案 0 :(得分：1)
$("#App").load("../html/Dashboards/InfoDashboard.html")是异步的，因此任何依赖于其对DOM更改的操作都需要在回调函数中完成。
$("#App").load("../html/Dashboards/InfoDashboard.html", function() {
populateList();
});