[解決済み] Bootstrap $('#myModal').modal('show') が動作していません。

質問

なぜかわからないのですが、モーダル機能がすべて動作していません。 バージョンとロードを確認しましたが、問題ありませんでした。

このエラーメッセージがずっと表示されています。

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

は、すでに代替案を見つけました。 の代わりに

$('#myModal').modal('hide');

私はこれを使いました。

$('#myModal .close').click();

そして、完璧に動作しています。

今問題になっているのは、ショー

$('#myModal').modal("show");

また、両方を試してみました。

$('#myModal').modal("toggle");

そして

$('#myModal').modal();

が、残念ながらどれもうまくいきません。

ボタンがクリックされたら、検証を行い、Web サービスから json データを処理し、成功したらモーダルを表示します。

 <button type="button" id="creatNewAcount" class="btn btn-default" data-toggle="modal">Sign up</button>

もし代替案があれば教えてほしい。

どのように解決するのですか？

このような問題の主な原因は次のとおりです。

1.jqueryライブラリを複数回定義している場合。

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <div class="modal fade" id="myModal" aria-hidden="true">
    ...
    ...
    </div>

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

ブートストラップライブラリは、最初のjqueryライブラリに適用されますが、jqueryライブラリを再読み込みすると、元のブートストラップの読み込みが失われます（モーダル機能はブートストラップ内にあります）。

2.JavaScriptのコードを内側に記述してください

$(document).ready(function(){});

3.モーダルのIDが同じかどうか確認してください。

コンポーネントに定義したものと同じです（同じIDが重複していないかも確認してください）。