web-dev-qa-db-ja.com

ブートストラップモーダル：関数ではありません

ページにモーダルがあります。ウィンドウがロードされたときにそれを呼び出そうとすると、コンソールにエラーを表示します。

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

これは私のモーダルHTMLです。

<div class="modal fade" id="prizePopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">
                This Modal title
            </h4>
        </div>
        <div class="modal-body">
            Add some text here
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">
                Submit changes
            </button>
        </div>
    </div>
</div>

<script type="text/javascript" src="js/bootstrap.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

そして、これはウィンドウがロードされたときにそれを実行するための私のJavaScriptです：

<script type="text/javascript">
$(window).load(function() {
    $('#prizePopup').modal('show');
});
</script>

どうすればこの問題を解決できますか？

javascriptjqueryhtmlbootstrap-modal
84
godheaper

スクリプトの順番に問題があります。この順番でそれらをロードしてください：

<!-- jQuery -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- BS JavaScript -->
<script type="text/javascript" src="js/bootstrap.js"></script>
<!-- Have fun using Bootstrap JS -->
<script type="text/javascript">
$(window).load(function() {
    $('#prizePopup').modal('show');
});
</script>

なぜこれ？ Bootstrap JSはjQueryに依存します ：

プラグインの依存関係

一部のプラグインとCSSコンポーネントは他のプラグインに依存しています。プラグインを個別に含める場合は、ドキュメントでこれらの依存関係を確認してください。 すべてのプラグインがjQueryに依存していることにも注意してください（つまり、jQueryはプラグインファイルの前に含める必要があります）。

127
Ionică Bizău

この警告は、jQueryがコード内で複数回宣言されている場合にも表示されることがあります。 2番目のjQuery宣言は、bootstrap.jsが正しく機能しないようにします。

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
...
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
61
Nurp

この問題は、jQueryインスタンスが複数回発生していることが原因です。 jQueryの倍数インスタンスを持つファイルを多数使用している場合は注意してください。 1つのjQueryのインスタンスを残すだけで、あなたのコードは動作します。

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
12
Juan Camilo Colmenares Rocha

jQueryが最初になります。

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
11
dashtinejad

スクリプトの順序を変更する

ブートストラップはjqueryプラグインなので、Jqueryを実行する必要があります

7
Vitorino fernandes

インポート文の変更が機能しました。から

import * as $ from 'jquery';

に：

declare var $ : any;
3
ranjeet8082

TypeErrorの原因：$（…）.modalは関数ではありません：

  1. スクリプトが間違った順序でロードされます。
  2. 複数のjQueryインスタンス

解決策：

  1. 場合によっては、スクリプトがまだ到達していない要素にアクセスしようとすると、エラーが発生します。 BootstrapはjQueryに依存するため、jQueryを最初に参照する必要があります。したがって、jquery.min.js、bootstrap.min.js、さらにbootstrapモーダルエラーは、実際にはモーダル関数を呼び出す前にブートストラップのjavascriptを含めなかった結果である必要があります。モーダルは、jQueryではなくbootstrap.jsで定義されます。したがって、スクリプトはこの方法で含める必要があります

       <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
   <script type="text/javascript" src="js/bootstrap.js"></script>

  2. JQueryのインスタンスが複数ある場合、2番目のjQuery宣言により、bootstrap.jsが正しく機能しなくなります。モーダルポップアップを呼び出す前に、jQuery.noConflict();を使用してください

    jQuery.noConflict();
$('#prizePopup').modal('show');

    .load、.unload、または.errorなどのjQueryイベントエイリアスは、jQuery 1.8以降廃止されました。

    $(window).on('load', function(){ 
      $('#prizePopup').modal('show');
});

    または、モーダルポップアップを直接開いてみてください

    $('#prizePopup').on('shown.bs.modal', function () {
      ...
});
1
Nishanth ॐ

角度でモーダルbootstrapを統合すると、このエラーが発生します。

これは、この問題を解決するための私のソリューションです。

私は誰のために懸念を共有します。

最初のステップは、jqueryコマンドでbootstrapおよびnpmをインストールする必要があります。

次に、コンポーネントにdeclare var $ : any;を追加する必要があります

また、onSave（）メソッドで$('#myModal').modal('hide');を使用できます

デモ https://stackblitz.com/edit/angular-model-bootstrap-close?file=src/app/app.component.ts

1
Hien Nguyen

HTTPSではなくHTTPを使用してjqueryをインポートしたため、本番で問題が発生しました（そして本番はHTTPS）

0
Patrick from NDepend team

実行する

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

プロジェクト内でAngularプロジェクトに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ファイルのtypesフィールドに "jquery"を含めます。

これにより、Angularプロジェクト内の 'modal'と '$'のすべてのエラーが削除されます。

0
cyperpunk

パーティーには少し遅れていますが、重要な注意点があります。

あなたのスクリプトは正しい順番になっているかもしれませんが、あなたのscriptタグの中のどんなasyncsにも気をつけてください（このように）

<script type="text/javascript" src="js/bootstrap.js" async></script>

これが問題の原因になっている可能性があります。特に本番環境専用にこのasyncを設定している場合、これは理にかなっていることに本当にイライラすることがあります。

0
Martin Shishkov