“.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

代码看起来不错，正在处理 fiddle。试试：

使用$(document).ready()包裹JS代码
从 HTML 加载 jQuery 并检查它是否有效（如果有效，则导入 jQuery 时你这边有问题）。
确保在 bootstrap CSS 文件在 JS 文件之前加载。

如果上述 none 有效，请考虑共享更多 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>

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

".modal is not a function" Bootstrap 3.3.7, jQuery 3.1.1

html

javascript

modal-dialog

show

twitter-bootstrap