使用jQuery .load()加载URL内容报错：TypeError: $(...).load is not a function

问题原因 #

1. jQuery版本（slim版缺失AJAX方法）：最新版jQuery的slim精简构建版本移除了.load()、.ajax()等AJAX相关方法，这是TypeError: $(...).load is not a function报错的核心原因。
2. 事件与内容重载冲突：加载的新内容若包含.nav-link元素，或event.preventDefault()未生效，会导致点击直接跳转；部分场景下AJAX请求异常也会造成仅能工作一次的问题。

解决方案 #

1. 替换为完整版本的jQuery #

确保引入的是jQuery完整构建版本，而非slim精简版。slim版为了减小体积砍掉了AJAX模块，无法使用.load()方法。

2. 优化脚本逻辑，修复跳转/单次生效问题 #

更新脚本，强化默认行为阻止、错误处理，并支持加载页面片段：

$(document).ready(function() {
  $(document).on('click', '.nav-link', function(event) {
    // 强制阻止链接默认跳转行为
    event.preventDefault();
    event.stopPropagation();
    
    var targetUrl = $(this).attr('href');
    var $contentContainer = $('#content-column');

    // 加载前显示状态提示
    $contentContainer.html('<div>加载中...</div>');

    // 使用.load()加载内容，可选加载目标页面的指定片段（比如#target-section）
    $contentContainer.load(targetUrl + ' #target-section', function(response, status, xhr) {
      // 处理加载错误
      if (status === 'error') {
        $contentContainer.html(`加载失败: ${xhr.status} - ${xhr.statusText}`);
      }
    });
  });
});

• 如果目标页面是完整HTML结构（包含<html>/<body>），建议加载其内部的特定内容片段（如示例中的#target-section），避免解析异常。
• 添加event.stopPropagation()防止事件冒泡导致的意外行为。

3. 排查其他潜在问题 #

• 确认#content-column元素在页面中存在，选择器拼写无误。
• 检查浏览器控制台是否有跨域报错：若目标URL与当前页面域名不同，需后端配置CORS规则，否则浏览器会拦截AJAX请求。

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