執行該命令時 「.modal不是一個函數」 自舉3.3.7，3.1.1的jQuery

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.noCon掠過（）; 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

代碼似乎很好，並在小提琴上工作。嘗試執行以下任一操作：

1. 使用$(document).ready()來包裝JS代碼。
2. 從HTML中加載jQuery，並檢查它是否有效（如果是這樣，導入jQuery時在結束時出現錯誤）。
3. 確保引導程序CSS文件在JS文件之前加載。

如果以上工作都沒有考慮共享更多的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>