javascript - jQuery .load() 不加载 HTML

Question

我正在尝试制作一个脚本，将我网站的页眉导入到每个页面中。我已经看过这些页面:

• > jQuery .load() not working - Stack Overflow
• > .load() - jQuery API Docs

我关注了这些网站，但我仍然在控制台中收到此错误:

jQuery.Deferred exception: Object doesn't support property or method 'load' 
TypeError: Object doesn't support property or method 'load'
   at Anonymous function (http://localhost/header-footer.js:4:5)
   at l (https://code.jquery.com/jquery-3.3.1.slim.min.js:2:29559)
   at Anonymous function (https://code.jquery.com/jquery-3.3.1.slim.min.js:2:29869) undefined

我的 index.html 在 body 部分有以下内容:

<div id="header"></div>
<script src="..." integrity="..." crossorigin="anonymous"></script> <!--jQuery-->
<script src="/header-footer.js"></script> <!--Shown below-->

header-footer.js 文件包括:

$(document).ready(function () {
    var header = $("#header");
    header.addClass("container-fluid clearfix"); // Bootstrap classes (unrelated as far as I know)
    header.load("/header.html");
});

我只想将我的 header.html 文件导入到我的 index.html 文件中。

我认为这与错误无关，但这是我的 header.html 文件的内容:

<ul class="list-inline">
    <li>
        <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownButton">
                <a class="dropdown-item" href="...">Another page</a>
            </div>
        </div>
    </li>
    <li><a class="btn btn-primary" href="/" role="button">Home</a></li>
    <li class="lead" style="float: left;">Website Name</li>
</ul>
<hr>

我犯了什么愚蠢的错误？谢谢!

Answer 1

您正在使用 jquery slim。

使用 code.jquery.com/jquery-3.2.1.min.js 而不是 slim 版本来使用 load 方法。