“未捕获的 TypeError：$(...).modal 不是函数”尝试从 Tabulator 打开模式时答案

【问题标题】："Uncaught TypeError: $(...).modal is not a function" when trying to open modal from Tabulator“未捕获的 TypeError：$(...).modal 不是函数”尝试从 Tabulator 打开模式时
【发布时间】：2020-02-12 15:14:35
【问题描述】：

已经回答了这个问题，但这些答案对我不起作用。我已经尝试更新我的依赖项，甚至添加了一些。

我正在使用制表器来管理用户。当我单击制表符中的单元格时，我希望它打开一个模式，以便我可以自动填充它。

如何在行/单元格单击时打开模式？我知道对于行点击我没有使用正确的功能，我只使用单元格点击进行测试。

我收到以下错误：

gestaoutilizadores:338 Uncaught TypeError: $(...).modal is not a function 在 t.cellClick (gestaoutilizadores:338) 在 HTMLDivElement。 (tabulator.min.js:4)

依赖关系

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.4.3/dist/js/tabulator.min.js"></script>

模态

<div class="modal fade" id="exampleModal" 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">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Javascript（制表符）

var table = new Tabulator("#example-table", {
  height: "100%", // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
  data: tabledata, //assign data to table
  layout: "fitColumns", //fit columns to width of table (optional)
  pagination: "local", //enable local pagination.
  paginationSize: 5, // this option can take any positive integer value (default = 10)
  columns: [ //Define Table Columns
    {
      title: "ID",
      field: "id",
      width: 150
    },
    {
      title: "Tipo Utilizador",
      field: "type",
      align: "center",
      /*, align:"left", formatter:"progress"*/ formatter: "lookup",
      formatterParams: {
        "0": "Super User",
        "1": "Admin",
        "2": "Utilizador Normal",
      }
    },
    {
      title: "Username",
      field: "username",
      align: "center",
      cellClick: function(e, cell) {
        var data = cell.getData();
        $('#exampleModal').modal('toggle');
        console.log(data);

        console.log("username")
      },
    },
    {
      title: "Password",
      field: "password",
      align: "center"
    },
    {
      title: "Empresa",
      field: "empresa",
      align: "center"
    },
    {
      title: "Data de Criacao",
      field: "createDate",
      sorter: "date",
      align: "center"
    },
  ],
});

【问题讨论】：

$(...).modal is not a function 表示您没有正确导入某些内容（无论 modal 来自何处）。
对不起，谢谢，我已经更新并添加了我认为报告中必要的依赖项
我已经导入了这些，但没有在问题上发布..但即使它不起作用。
确保在 tabulator.min.js 之前导入 bootstrap.min.js，因为 Tabulator 依赖于 Bootstrap。
@NielsBosman 还是谢谢你，但是依赖项是按照你说的那样排序的，但无论如何都不起作用

标签： javascript html tabulator

【解决方案1】：

您需要在引导库之前导入 jQuery 库。

这是因为bootstrap库会在加载包的时候用jQuery注册模态插件，如果此时jQuery不存在，那么模态插件将不会被加载，你的代码会出错。

【讨论】：