wordpressで$マーク付いたjavascript関数を使うときの注意事項 is not defined jquery 外部htmlから呼び出し

ネットの情報や、参考書を読んで$マークの付いたjavascriptの関数をwordpressに組み込んだ際に正常に動作しない場合があります。理由としては、wordpressの他の関数と衝突(コンフリクト)が起きている可能性があります。

これを防ぐために、javascriptの処理を組み込む際は、カプセル化を実施する必要があります。以下に例を挙げます。

  • ウィンドウ読み込み時に動作する処理(load処理)を組み込む場合は、「jQuery(function($) {});」で囲みます。

  • 即時関数を呼び出すときは以下の通り変更します。


【2017/11/29追記】

wordpressでjavascript、jQueryを利用する際に

  1. 「wordpress独自のjQueryを利用する方法」
  2. 「外部jQueryを読み込む方法」

の2種類の方法があります。それぞれメリット、デメリットがありますが、1を選択した場合は、ネットやフリーで提供されている$付きのjavascriptソースコードをカプセル化しないといけないことが多いので、そこはデメリットになります。

制作するホームページによって、どちらを使うかを選択しなければなりませんが、機会があれば両方試してみた方が勉強になるかと思います。

【2015/03/29追記】

基本的に「jQuery(function($) {});」はjsファイルの全体を囲むことで、手間が省けます。ただし、ユーザで定義する関数を外部htmlから呼び出す場合は、「jQuery(function($) {」で囲まれるため、スコープの範囲外となってしまいます。(デバッグで見ると、関数名 is not defined となる)

この場合は、グローバル変数にユーザが定義した関数をセットすることで、外部から呼び出し可能です。

ex,

jQuery(function($) {

window.test = test; //外部のhtmlから呼び出す場合は関数をグローバル変数に設定する

function test() {

alert("testメッセージ");

}

});

コメントはお気軽に!足跡を残したり、適当に雑談したりしてね!

メールアドレスが公開されることはありません。