使用jQuery .load方法报错：$(...).load is not a function 求助

嘿，这个问题我之前也踩过坑！大概率是你引入的jQuery版本不对——准确说，是用了slim精简版的jQuery，这个版本把AJAX相关的方法（包括你用的.load()）都移除了，所以才会报这个错。下面给你一步步排查和解决的方法：

1. 检查并替换jQuery版本 #

Bootstrap的默认CDN有时候会附带slim版的jQuery，你可以看看页面里的jQuery引入代码是不是长这样：

<script src="https://code.jquery.com/jquery-3.x.x.slim.min.js"></script>

如果是，赶紧换成完整版本的jQuery，比如：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

2. 确保脚本引入顺序正确 #

脚本的加载顺序很重要，必须遵守：

• 先引入完整版本的jQuery
• 再引入Bootstrap的JS文件
• 最后放你的自定义脚本（也就是调用.load()的代码）

3. 确认文件路径正确 #

虽然当前报错是方法不存在，但也顺便检查下'HTML/avaleht.html'这个路径是否正确：

• 如果你的主页面在根目录，那HTML文件夹要和主页面同级，且里面确实有avaleht.html文件
• 可以用相对路径的绝对写法（比如'/HTML/avaleht.html'）试试，避免路径层级问题

修改后的完整示例代码 #

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>你的页面标题</title>
  <!-- 第一步：引入完整版本jQuery -->
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <!-- 第二步：引入Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <!-- 要加载内容的容器 -->
  <div class="carousel-load"></div>

  <!-- 第三步：自定义脚本放在body末尾，确保DOM已加载 -->
  <script>
    $(document).ready(function(){
      $(".carousel-load").load('HTML/avaleht.html');
    });
  </script>
</body>
</html>

另外补充下：如果用的是Bootstrap 5，其实它已经不再依赖jQuery了，但你要使用jQuery的AJAX方法（比如.load()），还是得自己手动引入完整版本的jQuery，slim版绝对不行哦～

内容的提问来源于stack exchange，提问作者Rikas