我是未定义的[bootstrap 4]

Question

我正在通过CDN使用bootstrap 4.1.x.

问题是我加载页面的时间有一半,JavaScript会抛出错误:

TypeError:我未定义

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属性不保证加载解析顺序(请参阅何时在加载脚本时使用async vs defer？).如果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">