javascript - i 未定义 [引导程序 4]
问题描述
我通过 CDN 使用 bootstrap 4.1.x
问题是在我加载页面的一半时间里,JavaScript 会抛出一个错误:
类型错误:我未定义
bootstrap.min.js:6:2691
有时它来自引导程序的 utils.js
我正在使用 JavaScript 生成页面的 HTML 部分:
document.getElementById("something").innerHTML = myString;
这是实际的字符串:
<div class="col-sm-6 col-md-4 col-lg-4 mt-4">
<div class="card">
<a class="modal-link" data-toggle="modal" href="#educ">
<div class="card-block">
<h5 class="card-title">
<img class="card-img" src="/content/images/logo.png"> Logo</h5>
<div class="card-text">
some text
</div>
</div>
</a>
</div>
</div>
<div class="modal fade" id="educ">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header py-2">
<h4 class="modal-title">modal title</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!--modal body-->
<div class="modal-body d-flex flex-column h-100">
<h4>title</h4>
<div class="mx-auto text-center">
<img src="#" class="img-responsive img-thumbnail img-modal" alt="Paris">
</div>
<button type="button" class="btn custombtn-red" data-toggle="collapse" data-target="#esm">
<i class="fa fa-chevron-down" aria-hidden="true"></i> cours</button>
<div id="esm" class="collapse">
<p class="titre2">collapse text</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn custombtn-red" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
我是 JavaScript 新手,所以也许我遗漏了一些明显的东西,但我很乐意使用任何帮助来查找此错误的来源。
编辑:我正在使用的 CDN
<link async rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script async src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script async src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link async href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
<script async src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
解决方案
async 属性不保证加载解析顺序(请参阅加载脚本时何时使用异步与延迟?)。如果 Jquery 没有赢得加载比赛,那么 Boostrap 就会失败。
您最好使用 defer 而不是 async 并首先加载 Jquery:
<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script defer src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
推荐阅读
- python-3.x - 处理 Tornado 的正确方法 read_bytes 方法
- c# - 尽管有 Console.ReadLine() 调用和更多代码,但 C# 控制台关闭
- xml - XSLT 匹配不同的条件
- java - 如何在java中打印所有目录和文件以及所有子目录和文件
- postgresql - 使用带有 PL/pgSQL 的 soci 进行变量绑定
- python-3.x - 生成具有大 x 值的图形
- c# - Icecast Streaming 使用 Winform 将波形缓冲区压缩为 MP3
- python-3.x - 为什么使用以下代码得到 1 的输出?
- pandas - python中的groupby函数
- javascript - Openlayers 5 添加特征图