TypeError：$（…）.modalはブートストラップModalの関数ではありません

別のビューのHTMLに動的に挿入しようとしているブートストラップ2.32モーダルがあります。Codeigniter 2.1を使用しています。ブートストラップモーダル部分ビューをビューに動的に挿入した後、次のようにします。

<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 

どうすれば修正できますか？

私はmwebberがコメントで言ったことを強調したいだけです：

jQueryが2回含まれていないかどうかも確認してください

:)

それは私にとって問題でした

このエラーは、実際には、modal関数を呼び出す前にブートストラップのJavaScriptを含めなかった結果です。モーダルはjQueryではなくbootstrap.jsで定義されます。ブートストラップが実際にmodal関数を定義するためにjQueryを必要とすることに注意することも重要です。したがって、ブートストラップの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>

jqueryとブートストラップをリンクした後、jqueryとブートストラップのScriptタグのすぐ下にコードを記述します。

$(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>

の.remove をjquery介してロードする、htmlに含まれていないライブラリを確認してください。Ajax<script src="~/Scripts/jquery[ver].js"></script>AjaxUpdate/get_modal

別の可能性としては、JQueryを含めたり、$と競合したりすることで、他のスクリプトの1つが問題を引き起こしている可能性があります。含まれている他のスクリプトを削除して、問題が解決するかどうかを確認してください。私の場合、1つのコードを不必要に何時間も検索した後、バイナリ検索パターンでスクリプトを削除し、問題のあるスクリプトをすぐに発見しました。

この問題を次のように使用することで解決しました。

window.$('#modal-id').modal();

走る

npm i @types/jquery
npm install -D @types/bootstrap

Angular Projectにjqueryタイプを追加するためのプロジェクト。その後に含める

import * as $ from "jquery";
import * as bootstrap from "bootstrap";

あなたのapp.module.ts

追加

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

body。終了タグの直前のindex.html内。

また、Angular 2-7を実行している場合は、tsconfig.app.jsonファイルのタイプフィールドに「jquery」を含めます。

これにより、Angularプロジェクトの「モーダル」と「$」のすべてのエラーが削除されます。

私の経験では、おそらくそれはjqueryバージョン（複数のバージョンを使用）の競合で起こりました、問題を整理するために、以下のような競合のない方法を使用できます。

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

Laravelでこの問題を解決するには、以下の行を変更します resources\assets\js\bootstrap.js

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

に

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

私の場合、私はRailsフレームワークを使用し、jQueryを2回必要とします。それが理由だと思います。

最初にapp / assets / application.jsファイルを確認できます。jqueryとbootstrap-sprocketsが表示された場合、2番目のライブラリが必要とする必要はありません。ファイルは次のようになります。

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

次にapp / views / layouts / application.html.erbを確認し、jqueryを必要とするスクリプトを削除します。例えば：

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

初心者が複数のチュートリアルコード例を使用すると、この問題が発生することがあります。

私にとって、私は//= require jquery後にしました//= require bootstrap。ブートストラップの前にjqueryを移動すると、すべてが機能しました。

同じ問題がありました。変化

$.ajax(...)

に

jQuery.ajax(...)

動作しませんでした。しかし、jQueryが2回含まれていることがわかり、そのうちの1つを削除すると問題が解決しました。

他の答えは私のreact.jsアプリケーションではうまくいかないので、私はこれにプレーンJavaScriptを使用しました。

以下の解決策は機能しました：

1. モーダル/ダイアログの閉じる部分にIDを指定します（以下の例では「myModalClose」）

<span>
   className="close cursor-pointer"
   data-dismiss="modal"
   aria-label="Close"
                     id="myModalClose"
>
...

2. 次のIDを使用して、上記の閉じるボタンにクリックイベントを生成します。

   document.getElementById("myModalClose").click();

おそらく、jQueryを使用して、閉じるボタンに同じクリックを生成することもできます。

お役に立てば幸いです。

あなたはあなたのボタンで使うべきだと思います

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

hrefの代わりにdata-targetが必要です

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

モーダルコンテンツが既に読み込まれていることを確認してください

問題は、モーダルの表示が2回呼び出されること、1つはajax呼び出しで呼び出されること、問題なく動作すること、モーダルは正しく表示されることですが、エラーはおそらくモーダルを処理する必要があるそのボタンのinitアクションで発生します。このアクションは実行できません。モーダルはその時にロードされないためです。