Bootstrap+jqueryファイル導入エラー

今回はbootstrap+jqueryファイル導入時に報告される注意事項を紹介します。実際の事例を見てみましょう。

プロジェクトに取り組んでいると、常にさまざまなバグがコンソールに表示されますが、開発中にエラーが発生するたびにパニックになる必要はありません。要約するのが得意です。次回見たときに修正します。以下に、開発プロセス中に何が起こっているのかを要約します。

エラー 1: キャッチされない参照エラー: $ が定義されていません

Uncaught ReferenceError: $ is not defined
Uncaught ReferenceError: jQuery is not defined

エラーの理由: ファイルをロードする順序が間違っています。jQuery ファイルの順序が前にある必要があります

方法:すべてのスクリプト ファイルの前に jQuery ファイルを記述しますが jsp ページに変更され、パスが見つかりません。 さて、次のようになります

現時点では、このコードをファイルに追加するだけです:

解決策: 次のコードを間に挿入します。 と

<%
 String path = request.getRequestURI();
 String basePath = request.getScheme() + "://"
   + request.getServerName() + ":" + request.getServerPort()
   + path;
%>
<base href="<%=basePath%>" rel="external nofollow" >

エラー 3: Uncaught TypeError: $(...).tooltip は関数ではありません

Uncaught TypeError: $(...).tooltip is not a function
 at HTMLDocument.<anonymous> (app.js:42)
 at l (jquery.min.js:4)
 at Object.fireWith [as resolveWith] (jquery.min.js:4)
 at Function.ready (jquery.min.js:4)
 at HTMLDocument.S (jquery.min.js:4)

理由: jQuery UI の 2 つの異なるバージョンが含まれています。これにより競合が発生する可能性があります。

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

Solution:

Edit:

<script>
jQuery( document ).ready(function( $ ) {
 $('.hasTooltip').tooltip();
});
</script>

を削除してみてください。このように使用すると、問題が解決しました。

エラー 4: キャッチされない TypeError: $(...).sortable は関数ではありません

Uncaught TypeError: $(...).sortable is not a function
 at HTMLDocument.<anonymous> (dashboard.js:12)
 at l (VM552 jquery.min.js:4)
 at Object.fireWith [as resolveWith] (VM552 jquery.min.js:4)
 at Function.ready (VM552 jquery.min.js:4)
 at HTMLDocument.S (VM552 jquery.min.js:4)

エラー 5: bootstrap.min.js:7 キャッチされないエラー: ブートストラップには jQuery が必要です

bootstrap.min.js:7 Uncaught Error: Bootstrap requires jQuery
 at bootstrap.min.js:7

解決策: 解決策: jquery.min.js を bootstrap.min.js ファイルの前に置き、それを参照します。 bootstrap.min.css ファイルが 2 つのファイルの前で参照されるか後ろで参照されるかは関係ありません (複数回テストされています)。 ）。

この記事の事例を読んだ後、あなたはその方法をマスターしたと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

jquery で ajax をリクエストし、サーブレットで ajax を応答する

スタートアップ ページでデータを即座にロードする jquery を実現する

入力ボックスとドロップダウン ボックスの連携効果を実現する

以上がBootstrap+jqueryファイル導入エラーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。