Question

我有一个文件（main.js）似乎在一段时间后加载某些元素。如何使所有html元素都被加载并准备好被main.js操作？

在我的屏幕上，控制台将打印= ＆＃34;发起虚假＆＃34;然后＆＃34;启动版本为真＆＃34;

的index.html

<head>
<!-- JQUERY, BOOTSTRAP -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-toggle.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-slider.min.css">
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-toggle.min.js"></script>
<script type="text/javascript" src="js/bootstrap-slider.min.js"></script>
<script type="text/javascript" src="js/validator.min.js"></script>

<!-- MAIN -->
<script type="text/javascript" src="js/main.js"></script>
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/header.css">
<link rel="stylesheet" type="text/css" href="css/navbar.css">
</head>
<body onload="$('#connection_show').fadeIn(SHOW_BODY_MS)">
<!-- HEADER -->
<div id="header" class="page-header">
    <script>
        $("#header").load("header.html");
    </script>
</div>

<!-- NAVBAR -->
<nav id="navbar" class="navbar navbar-default">
    <script>
        $("#navbar").load("navbar.html");
    </script>
</nav>
etc...

了header.html

<label class="inline margin-left-20">System Version:</label><p id="systemVersion" class="inline">Unavailable</p></a>    
<label class="inline">Background Calls:</label>
<input id="intervalCtrl" class="checkbox" type="checkbox" data-toggle="toggle" data-size="small" data-width="70" data-on="On" data-off="Off" data-onstyle="success" data-offstyle="danger">

main.js

function getAndDisplayVersion(){
$.ajax({
    url: VERSION_URL,
    type: "GET"
}).done(function(data) {
    $("#systemVersion").html(data["system"]);
    console.log("initiated version", $("#intervalCtrl").length > 0)
});
}

document.addEventListener("DOMContentLoaded", getAndDisplayVersion);

function registerIntervalChangeHandler() {
    console.log("initiated ", $("#intervalCtrl").length > 0)    
    $("#intervalCtrl").bootstrapToggle();
    $("#intervalCtrl").change(function() {
        console.log("registered!")
    });
}

document.addEventListener("DOMContentLoaded", registerIntervalChangeHandler);

我已经改变了调用函数的顺序，它没有区别（＆＃34;启动版本为真＆＃34;即使函数首先也会始终打印）。

Answer 1

#intervalCtrl元素是header.html文件的一部分，这意味着在将此元素添加到页面之前触发DOMContentLoaded事件是完全可能的（它被添加使用jQuery＆＃39; .load()函数。）

.load()方法接受回调函数作为第二个参数。加载html文件后，您可以使用它来运行一些代码。

以下是一个例子：

$("#navbar").load("navbar.html", function(){
    getAndDisplayVersion();
    registerIntervalChangeHandler();
});

JS文件无法找到某些HTML元素

1 个答案: