JavaScript：如何从内部函数调用 Bootstrap 模态？答案

【问题标题】：JavaScript: How to call Bootstrap Modal from inside function?JavaScript：如何从内部函数调用 Bootstrap 模态？
【发布时间】：2020-08-16 18:43:09
【问题描述】：

我想在点击一个显示模式的链接时调用一个函数。

head 标签中的导入脚本

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

模态：

<div class="modal fade" id="modFileUpload" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Upload Plans</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
         <form id="myform">
            <div class="custom-file">
              <input type="file" class="custom-file-input" id="myfile">
              <label class="custom-file-label" for="customFile">Choose file</label>
            </div>
          </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal" id="closeUploadPlansModal">Close</button>
      </div>
    </div>
  </div>
</div>

链接：

<a class="nav-link text-left"  role="button" onclick="uploadFiles()" >
                  <i class="fa fa-upload"></i><span class="nav-text">Upload Plans</span>
                  </a>

上传文件功能：

function uploadFiles(){
    $('#modFileUpload').modal('show'); //getting error here
}

我收到以下错误：

未捕获的类型错误：$(...).modal 不是函数

有什么方法可以显示链接的模态点击？

【问题讨论】：

你能把你的代码贴在你导入 bootstrap.js 等的地方吗？
你要么没有加载 bootstrap.js 要么多次加载 jQuery.js
这能回答你的问题吗？ Bootstrap modal: is not a function
@charlietfl 我已经用我的导入脚本更新了问题，我错过了什么吗？
确保页面下方没有加载其他版本的 jQuery.js。另一个问题可能是使用 $() 的其他库，它不再是 jQuery 对象

标签： javascript

【解决方案1】：

我遇到了同样的问题，因为我在 head 标记以及 body 标记之前导入了 cdn 脚本。

在我的情况下，所有版本都是不同的。

您的 head 标记导入应如下所示：

<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<!-- JS, Popper.js, and jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

并确保您的代码中不应有任何其他引导程序、jquery 脚本。

【讨论】：

如果想使用 ajax 或其他任何不包括完整版的 api，请小心使用瘦版本的 jQuery