jQueryの多重読み込みは、原則として ダメ ゼッタイ

  • 10
    Like
  • 0
    Comment
More than 1 year has passed since last update.

ちょっとした、「望ましくないこと」が重なると、ややこしくなるお話。

jQuery-Validation-Engineが動かない?!

簡単にブラウザ上の入力フォームのチェックを実装できる
jQuery-Validation-Engineですが なぜか動きません。

エラーログを見てみると


Uncaught TypeError: jQuery(...).validationEngine is not a function(anonymous function) 

発生箇所は



//jQuery-Validation-Engine を呼び出している場所

jQuery(document).ready(function(){
    // binds form submission and fields to the validation engine
    jQuery("#formID").validationEngine('attach', {promptPosition : "bottomLeft"});
        });

//ひも付けている箇所

なので、ありがちな「紐付けがうまくいっていない」わけではありません。
(検索してみると、jQueryのIDがずれているケースが多数)

犯人はjQueryの多重読み込みだった

よく見てみると、jQueryが多重読み込みされていました。

まず、headの上のほうで


language="javascript" type="text/javascript" src="/js/jquery.js"

そして、新しく組み込んだ郵便番号を住所に変換するスクリプトで


type="text/javascript" src="http://jpostal.googlecode.com/svn/trunk/jquery.jpostal.js 

※一部タグ外してます。

jQueryを利用する場合、jQueryそのものを起動するためのjsファイルを
読み込み必要が有りますが、二重に読み込んだりすると

「所によりときどき問題が発生する」
ことがあるようです。

原則として、複数のjQueryを読み込まないほうがよさそうです。

追記

複数のjQueryを共存させるケースもあります。

http://qiita.com/mijabi/items/c68d27bc2ea5642675af