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（）; COMAND。没有成功。

以下是捕获的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

代码似乎很好并且正在努力工作。尝试：

使用$(document).ready()包装JS代码。
从HTML加载jQuery并检查它是否有效（如果有的话，导入jQuery时出现问题）。
确保在JS文件之前加载bootstrap 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>

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

1 个答案: