Bootstrap 4.1.x页面加载偶现TypeError: i is undefined错误排查求助

你遇到的这个概率性TypeError: i is undefined错误，根源其实是两个关键问题：脚本加载顺序混乱和动态插入HTML后未初始化Bootstrap组件，我来一步步帮你拆解：

一、核心原因分析 #

1. CDN脚本的async属性打乱了依赖顺序 #

你当前的CDN加载顺序里，jquery.min.js是最后加载的，但Bootstrap 4.x完全依赖jQuery和Popper.js才能正常运行。加上你给所有脚本都加了async属性，这会让浏览器并行加载这些脚本，谁先下载完谁先执行——有时候jQuery还没加载完成，Bootstrap的脚本就先跑起来了，找不到依赖的jQuery对象，就会抛出类似i is undefined的模糊错误（因为Bootstrap源码里用了压缩变量名）。这就是为什么错误是“一半概率”出现的：加载顺序是随机的，只有当jQuery先加载完成时才不会出错。

2. 动态插入的HTML未被Bootstrap初始化 #

Bootstrap默认只会在页面首次加载时，自动初始化页面上已存在的组件（比如modal、collapse）。你用innerHTML动态插入的modal和collapse元素，Bootstrap根本不知道它们的存在，后续触发相关交互时也会因为未初始化而报错。

二、解决方案 #

1. 修正脚本加载顺序和async属性 #

把脚本的加载顺序调整为jQuery → Popper.js → Bootstrap.js，并且移除脚本的async属性（因为依赖强的脚本不能异步加载，否则顺序不可控）。调整后的CDN引用应该是这样：

<!-- CSS 可以保留async，不影响依赖 -->
<link async rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link async href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">

<!-- 脚本必须按顺序加载，移除async -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

2. 动态插入HTML后手动初始化组件 #

在你用innerHTML插入完HTML之后，需要手动初始化新添加的Bootstrap组件，比如：

// 先插入HTML
document.getElementById("something").innerHTML = myString;

// 初始化动态添加的modal和collapse
$('#educ').modal({});
$('#esm').collapse({});

// 或者更通用的方式，初始化所有新添加的交互组件
$('[data-toggle="modal"]').modal({});
$('[data-toggle="collapse"]').collapse({});

这样就能确保动态添加的元素被Bootstrap正确识别，不会因为未初始化而触发错误。

三、额外提示 #

作为JavaScript新手，记住一个重要原则：有依赖关系的脚本，必须保证依赖先加载完成。像Bootstrap这类依赖jQuery的库，绝对不能在jQuery之前加载，也不能用async让它们的执行顺序不可控——这是很多新手容易踩的坑。

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