TypeError：$（...）。模態不是引導程序的函數Modal

我有一個引導2.32模式，我試圖動態插入到另一個視圖的HTML。我正在與Codeigniter 2.1合作。以下Dynamically inserting a bootstrap modal partial view into a view，我有：

<div id="modal_target"></div>

作爲插入的目標div。我有我的觀點一個按鈕，看起來像：

 <a href="#message" class="btn btn-large btn-info" data-action="Message" data-toggle="tab">Message</a>

我JS有：

$.ajax({ 
    type : 'POST', 
    url  : "AjaxUpdate/get_modal", 
    cache : false, 
    success : function(data){ 
     if(data){ 
      $('#modal_target').html(data); 

      //This shows the modal 
      $('#form-content').modal(); 
     } 
    } 
});

主視圖的按鈕：

<div id="thanks"><p><a data-toggle="modal" href="#form-content" class="btn btn-primary btn-large">Modal powers, activate!</a></p></div>

這是我想喜歡單獨作爲局部視圖存儲：

<div id="form-content" class="modal hide fade in" style="display: none;"> 
    <div class="modal-header"> 
     <a class="close" data-dismiss="modal">×</a> 
     <h3>Send me a message</h3> 
    </div> 
    <div class="modal-body"> 
     <form class="contact" name="contact"> 
      <fieldset> 

       <!-- Form Name --> 

      <legend>modalForm</legend> 

      <!-- Text input--> 
      <div class="control-group"> 
       <label class="control-label" for="user">User</label> 
       <div class="controls"> 
       <input id="user" name="user" type="text" placeholder="User" class="input-xlarge" required=""> 
       <p class="help-block">help</p> 
       </div> 
      </div> 

      <!-- Text input--> 
      <div class="control-group"> 
       <label class="control-label" for="old">Old password</label> 
       <div class="controls"> 
       <input id="old" name="old" type="text" placeholder="placeholder" class="input-xlarge"> 
       <p class="help-block">help</p> 
       </div> 
      </div> 

      <!-- Text input--> 
      <div class="control-group"> 
       <label class="control-label" for="new">New password</label> 
       <div class="controls"> 
       <input id="new" name="new" type="text" placeholder="placeholder" class="input-xlarge"> 
       <p class="help-block">help</p> 
       </div> 
      </div> 

      <!-- Text input--> 
      <div class="control-group"> 
       <label class="control-label" for="repeat">Repeat new password</label> 
       <div class="controls"> 
       <input id="repeat" name="repeat" type="text" placeholder="placeholder" class="input-xlarge"> 
       <p class="help-block">help</p> 
       </div> 
      </div> 



       </fieldset> 
     </form> 
    </div> 


    <div class="modal-footer"> 
     <input class="btn btn-success" type="submit" value="Send!" id="submit"> 
     <a href="#" class="btn" data-dismiss="modal">Nah.</a> 
    </div> 
</div>

當我點擊按鈕，進行模態的正確插入，但我得到了以下錯誤：

TypeError: $(...).modal is not a function

我該如何解決這個問題？

來源

2014-11-21 user61629

+22

檢查線路是否會用'jQuery的工作（...）。modal' 。你的jQuery可能處於兼容模式，還要檢查jQuery是否包含兩次。 – mwebber 2014-11-21 15:03:07

在嘗試調用bootstrap.js之前，很有可能沒有加載.modal（） – 2014-11-21 15:03:46

mwebber - 我對js沒有經驗，我該如何「檢查它是否適用於jQuery（...）。模式「。我以某種方式在控制檯中假設？ Etsitra，在這一切發生之前，bootstrap.js將被加載到標題中。 – user61629 2014-11-21 15:55:55

我想你應該在你的按鈕使用

<a data-toggle="modal" href="#form-content"

，而不是HREF應該有數據目標

<a data-toggle="modal" data-target="#form-content"

只是可以肯定的，那語氣內容已經加載

我認爲問題是，顯示模態被稱爲兩次，一個在ajax調用，工作正常，你說模態顯示正確，但錯誤p可以自帶的那個按鈕上的init動作，應該可以處理模態，這個動作不能被執行，因爲當時沒有加載模態。

來源

2014-11-21 15:12:51 Brzochod

此錯誤實際上是在調用modal函數之前不包括引導程序的JavaScript的結果。 Modal在bootstrap.js而不是jQuery中定義。另外需要注意的是，bootstrap實際上需要jQuery來定義modal函數，所以在包含引導程序的javascript之前包含jQuery是非常重要的。爲了避免錯誤，在調用modal函數之前，請確保包含jQuery和引導程序的JavaScript。我通常做以下我的頭標記：

<header> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script src="/path/to/bootstrap/js/bootstrap.min.js"></script> 
</header>

來源

2015-01-27 15:01:53 davetw12

該命令是真正重要的第一個庫，然後bootstrap ... – 2017-03-08 08:59:05

即使語義ui發生這種情況 – 2017-03-10 14:29:10

謝謝@ davetw12，它幫助了很多 – WEshruth 2018-01-13 09:47:35

100

我只是想強調什麼mwebber在評論說：

also check if jQuery is not included twice

這是這個問題對我來說

來源

2015-06-17 16:52:16 adsurbum

記住：一定要檢查jQuery調用文件的jQuery了。 – 2016-01-18 14:24:45

也發生了，當我把低版本的jQuery的條件包括ie8。 – 2016-08-10 11:53:35

還要確保沒有其他庫在他們自己的min文件中捆綁jQuery（DataTables在某些情況下會這樣做） – gillytech 2017-02-02 06:34:24

檢查jquery庫中未包含在html中，通過Ajax加載.remove您的AjaxUpdate/get_modal中的

來源

2015-08-07 09:42:29 Moslem7026

另一種可能性是您包括的其他腳本之一引起的問題還包括JQuery或與$衝突。嘗試刪除其他包含的腳本，看看它是否解決了這個問題。在我的情況下，經過數小時不必要地搜索我的一個代碼，我刪除了二進制搜索模式的腳本，並立即發現了違規腳本。

來源

2016-01-24 04:31:01 brad12s

在我的情況下，我使用rails框架並要求jQuery兩次。我認爲這是一個可能的原因。

您可以先檢查app/assets/application.js文件。如果出現jquery和bootstrap-sprockets，則不需要第二個庫需要。該文件應與此類似：

//= require jquery 
//= require jquery_ujs 
//= require turbolinks 
//= require bootstrap-sprockets 
//= require_tree .

然後檢查應用程序/視圖/佈局/ application.html.erb，並刪除腳本需要jQuery的。例如：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

我覺得有時候新手使用多個教程代碼的例子會導致這個問題。

來源

2016-05-29 23:03:00

將jquery和引導程序連接起來後，在jquery和bootstrap腳本標記下面寫下代碼。

$(document).ready(function($) { 
 
    $("#div").on("click", "a", function(event) { 
 
    event.preventDefault(); 
 
    jQuery.noConflict(); 
 
    $('#myModal').modal('show'); 
 

 
    }); 
 
});

<!-- jQuery library --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 

 
<!-- Latest compiled JavaScript --> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

來源

2016-09-03 13:54:22

我有同樣的問題。更改

$.ajax(...)

到

jQuery.ajax(...)

沒有工作。但後來我發現jQuery包含兩次，並刪除其中一個修復了問題。

來源

2017-07-20 18:02:15

根據我的經驗，很可能它發生在jQuery版本（使用多版本）衝突，爲了解決這個問題，我們可以使用像下面這樣的無衝突方法。

jQuery.noConflict(); 
(function($) { 
    $(function() { 
    // More code using $ as alias to jQuery 
    $('button').click(function(){ 
     $('#modalID').modal('show'); 
    }); 
    }); 
})(jQuery);

來源

2017-10-29 08:33:05 Jaison

我解決了Laravel這個問題通過對矯正低於resources\assets\js\bootstrap.js

window.$ = window.jQuery = require('jquery/dist/jquery.slim');

到

window.$ = window.jQuery = require('jquery/dist/jquery');

來源

2018-01-17 09:58:43

TypeError：$（...）。模態不是引導程序的函數Modal

回答

相關問題