jQuery .load() 不加载 HTML

Question

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

• jQuery .load() 不工作 - 爱编程的大狗
• .load() - jQuery API 文档

我关注了这些网站，但在控制台中仍然出现此错误：

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 而不是瘦版来使用load方法。