jqueryが本番で動かない!!確認したい事項4選

前置き

今回はjqueryがローカル環境(XMPP)では動いたのに、本番で何故か動かない時の対処方を書いていきます。

そもそも本番環境にjqueryファイルがアップロードされていない。

その1、そもそも本番環境にjqueryファイルがアップロードされていない。
確認する方法その1
ローカル環境のjqueryファイルとサーバーに上がっているjqueryファイルの差分を取るです。
確認する方法その2
jqueryを読み込んでいるページで右クリックしてソースを表示してキーボードのCtrl+Fでjqueryファイル名で検索をかけてヒットしたらクリックしてjqueryファイルを開きソース(コード)を確認する。

jqueryを使うためのJquery本体がアップロードされていない。

その2、jqueryを使うためのJquery本体がアップロードされていない。
Jquery本体というのは例えば、jquery-1.9.1.min.jsのようなjsファイルのことをいいます。
確認方法、サーバーのファイルを確認してください。ftpで接続してjqueryファイルが上がっているか確認する。

jquery本体又は、jqueryを外部ファイル化した奴のパスが違う。

その3、jquery本体又は、jqueryを外部ファイル化した奴のパスが違う。
scriptタグのsrc属性に書いたurlが存在しない又は違うところを読み込んでいる。
確認方法、先ほども書きましたが、jqueryを使っているページで右クリックをして、ソースを表示します。そして、キーボードのCtrl+Fでjqueryファイルを検索して、クリックします。ページが見つかりませんでしたと表示されれば、パスが間違っています。

jquery外部ファイルに処理を何個も記載している。

その4、jquery外部ファイルに処理を何個も記載している。
これは実際に私自身もつまづきました。

$(function(){
    $("class3").click(function(){
    });
    $("class2").click(function(){
    });
    $("class1").click(function(){
        $.ajax({
        });
    });
});

clickイベントを3つ記載したファイルを本番にアップして動作を確認した所、動かない
もちろんローカル環境(XMPP)では普通に動作していました。
試しにclass3のclickイベントを消して再びアップしたら動いた!
当然class3も記載したいので、

$(function(){
"class1".click
"class2".click
});
$(function(){
"class3".click
});

readyファンクションを上記みたいに2つに分けてみたが動かず。。。
最終的にclass3を別のファイルに改めて記載して読み込んだ所、(読み込むファイルを1つから2に増やした)
そしたら、動きました。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする