Jquery のbaloon.jsが読み込まれない

jqueryを勉強している初心者のものです。
現在、baloon.jsを用いて、吹き出しをつけようとコード
を作成しているのですが、実行したところ、以下の
エラーメッセージが流れてしまいます。
$(...).balloon is not a function
もしよろしければどこが悪いのかご教授頂けないでしょうか。

コードは以下のとおりです。

<!DOCTYPE html>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="/Users/yamamotoken/bootstrap-3.3.6-dist/js/jquery.balloon.js"></script>
<script src="nav.js"></script>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<html lang="ja">
  <script type="text/javascript">
  $(function() {
    $('#education').balloon({
    contents: '<a href="#">sample1</a>',
    tipSize: 0,
    offsetY: -50,
    offsetX: -50,
    showDuration: 0,
    hideDuration: 0,
    classname: 'balloon',
    css: null 
    });
  });

  </script>
</html>

行動規範の内容に同意します

回答2件

ベストアンサー

jQueryを2回読み込んでいて、

jQueryの読み込み
balloon.jsの読み込み
再度jQueryの読み込み

となっているので、2回めに読み込んだjQueryが、balloon.jsを読み込んだjQueryを上書きしてしまっています。2回目のjQueryを消しましょう。

なお、テスト程度ならいいのですが、/Users/yamamotoken/bootstrap-3.3.6-dist/js/jquery.balloon.jsというようにローカルの絶対パスで書くのは、あとあと流用も効かないのでおすすめしません。

投稿2016/03/02 05:12

maisumakun

総合スコア145183

jesushill

2016/03/02 05:30

コメント頂きましてありがとうございます。 2回めのjQueryを消したら表示出来ました。現在、作っているコードはテストですが、WEBにアップしたいのでパスを変更致します。

行動規範の内容に同意します

初めまして。
的外れなのかもしれませんが、2点確認です。

１．balloon.jsの場所
サーバ内のフルパスが記載されていますが、WEB上からその場所は見られるところですか？
「js/bootstrap.min.js」が同じディレクトリにあり、使用できているのであれば同様に記載してみてはいかがでしょうか？

２．2重定義？
jquery本体が2つ読み込まれていませんか？
・http://code.jquery.com/jquery.js
・http://code.jquery.com/jquery-1.9.1.min.js
もしバージョン違いで使う必要があるのであればバッティングしないようにしなければならなかったように記憶しています。

参考：https://www.halawata.net/2011/10/jquery-noconflict/

上記２点が気になりました。

投稿2016/03/02 05:18

T.Yokotani

総合スコア141

jesushill

2016/03/02 05:28

回答頂きましてありがとうございます。確認事項 1.baloon.jsの場所ですが、サンプル用にWEBにはアップしていません。アップする予定なので、記載を改めます。 2.jQuery本体が2つ読み込まれています。http://code.jquery.com/jquery.js は　現状必要ないのでカットしておきます。また、前の回答者の方がコメントくださっているように、二回jQueryを読み込んでいたので修正しましたら、表示出来ました。コメント頂きましてありがとうございます。