“.modal 不是函数” Bootstrap 3.3.7，jQuery 3.1.1

Question

我正在通过 jQuery 捕获一个字段

$addPanel = $("div#add-panel");

然后

$addPanel.modal("show");

但是，当执行命令时，我的控制台上出现错误：

Index.js:148 Uncaught TypeError: $addPanel.modal is not a function
at HTMLButtonElement.<anonymous> (Index.js:148)
at HTMLButtonElement.dispatch (jquery-3.1.1.js:5201)
at HTMLButtonElement.elemData.handle (jquery-3.1.1.js:5009)

我已经在我的 _layout 文件中验证了导入顺序（使用 asp.MVC），已经尝试过 jQuery.noConflit();命令。没有成功。

这是来自捕获的 div 的 HTML：

<div class="modal fade" id="add-panel" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Cadastrar nova nota fiscal</h4>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="col-lg-4">
                    <div class="form-group">
                        <label>Número</label>
                        <input id="number" placeholder="Insira o número" type="text" class="form-control" />
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="form-group">
                        <label>Série</label>
                        <input id="serie" placeholder="Insira a série" type="text" maxlength="50" class="form-control" />
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="form-group">
                        <label>Data</label>
                        <input id="date" placeholder="Insira a data" type="text" class="form-control" />
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="form-group">
                        <label>Fornecedor</label>
                        <div class="input-group">
                            <input class="form-control" id="supplierName" placeholder="Insira o nome do novo fornecedor" />
                            <select id="supplierID" class="form-control">
                                <option value="" class="empty">Selecione o fornecedor ou cadastre em +</option>
                            </select>
                            <span class="input-group-btn">
                                <button id="supplierAdd" type="button" class="btn btn-group btn-default" title="Novo Fornecedor">
                                    <i class="glyphicon glyphicon-plus"></i> Novo
                                </button>
                                <button id="supplierSave" type="button" class="btn btn-group btn-success" title="Salvar">
                                    <i class="glyphicon glyphicon-ok"></i> <span>Salvar</span>
                                </button>
                                <button id="supplierCancel" type="button" class="btn btn-group btn-danger" title="Cancelar">
                                    <i class="glyphicon glyphicon-remove"></i> Cancelar
                                </button>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="form-group">
                        <label>Descrição</label>
                        <textarea id="note" placeholder="Insira uma anotação" maxlength="200" class="form-control" style="resize: none;"></textarea>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" id="cancel-button" data-dismiss="modal">Fechar</button>
            <button type="button" class="btn btn-primary" id="confirm-button">Salvar</button>
        </div>
    </div>
</div>

感谢您的帮助。

Answer 1

代码看起来很好并且正在使用小提琴。尝试任一：

1. 使用$(document).ready()包装JS代码。
2. 从 HTML 加载 jQuery 并检查它是否有效（如果有效，则在导入 jQuery 时您的端有问题）。
3. 确保在 JS 文件之前加载引导程序中的 CSS 文件。

如果上述方法均无效，请考虑分享更多 index.js 代码。

$(document).ready(function() {
  $addPanel = $("div#add-panel");
  $addPanel.modal("show");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="modal fade" id="add-panel" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Cadastrar nova nota fiscal</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-lg-4">
            <div class="form-group">
              <label>Número</label>
              <input id="number" placeholder="Insira o número" type="text" class="form-control" />
            </div>
          </div>
          <div class="col-lg-4">
            <div class="form-group">
              <label>Série</label>
              <input id="serie" placeholder="Insira a série" type="text" maxlength="50" class="form-control" />
            </div>
          </div>
          <div class="col-lg-4">
            <div class="form-group">
              <label>Data</label>
              <input id="date" placeholder="Insira a data" type="text" class="form-control" />
            </div>
          </div>
          <div class="col-lg-12">
            <div class="form-group">
              <label>Fornecedor</label>
              <div class="input-group">
                <input class="form-control" id="supplierName" placeholder="Insira o nome do novo fornecedor" />
                <select id="supplierID" class="form-control">
                  <option value="" class="empty">Selecione o fornecedor ou cadastre em +</option>
                </select>
                <span class="input-group-btn">
                                <button id="supplierAdd" type="button" class="btn btn-group btn-default" title="Novo Fornecedor">
                                    <i class="glyphicon glyphicon-plus"></i> Novo
                                </button>
                                <button id="supplierSave" type="button" class="btn btn-group btn-success" title="Salvar">
                                    <i class="glyphicon glyphicon-ok"></i> <span>Salvar</span>
                </button>
                <button id="supplierCancel" type="button" class="btn btn-group btn-danger" title="Cancelar">
                  <i class="glyphicon glyphicon-remove"></i> Cancelar
                </button>
                </span>
              </div>
            </div>
          </div>
          <div class="col-lg-12">
            <div class="form-group">
              <label>Descrição</label>
              <textarea id="note" placeholder="Insira uma anotação" maxlength="200" class="form-control" style="resize: none;"></textarea>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" id="cancel-button" data-dismiss="modal">Fechar</button>
        <button type="button" class="btn btn-primary" id="confirm-button">Salvar</button>
      </div>
    </div>
  </div>