i 未定义 [引导程序 4]

Question

我通过 CDN 使用 bootstrap 4.1.x

问题是在我加载页面的一半时间里，JavaScript 会抛出错误：

TypeError: i 未定义

bootstrap.min.js:6:2691

有时它来自 bootstrap 的 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>

Answer 1

async 属性不保证加载解析顺序（参见When to use async vs defer when loading scripts?）。如果 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">