WordPressでjQueryが動作しない “$ is not a function”

Pocket

追記: 2012/01/24


WordPressでそれほど自分でJavaScriptを書くということがなかったけど、一つだけウィジットでAjaxを使って別なページを読み込むということをしていた。

コードを見直してみるとなぜかjQueryではなくprototype.jsで書かれている。

あれ? それほど昔に書いた物ではないはずなのになんでだろう? とそのときは思った。

それはいいとして、とりあえずjQueryに書き直すことに。

$(function(){
  $.ajax({
    url: '/recentbook.php',
    type: 'get',
    timeout: 5000,
    success: function(data){
      $('#recentbook').html(data);
    }
  });
});

しかし、試してみても動作しない。

Firebugを確認してみるとコンソールにエラーが”$ is not a function”と出ている。

もしかしてと思い、$をjQueryに書き換えてみた。

jQuery(function(){
  jQuery.ajax({
    url: '/recentbook.php',
    type: 'get',
    timeout: 5000,
    success: function(data){
      jQuery('#recentbook').html(data);
    }
  });
});

すると、ちゃんと動作した。

WordPressがどうやって動いてるかとかあんまり気にしてなかった。
grepでファイルを調べてみるとやっぱりというか、jQueryに完全移行しておらずprototype.jsもまだ使用していることが原因のようだ。

WordPress & jQuery: “$ is not a function”

$の使用が競合するのでjQueryでは$を使用しないようにしているということ。

(もしかして、前の時にもjQueryが動かなくて、しょうがなくprototype.jsで書いたのかもしれない。)

実際にWordPressのJSファイルでもご丁寧に”jQuery”と書いていることが分かった。

$grep -r jQuery *
抜粋...
wp-includes/js/wp-lists.dev.js:			jQuery.each( res.responses, function() {
wp-includes/js/wp-lists.dev.js:		var color = jQuery(el).css('backgroundColor');
wp-includes/js/wp-lists.dev.js:})(jQuery);
wp-includes/media.php:	jQuery(document).ready(function($){

それほど、沢山のコードが必要なわけではなかったので、jQueryといちいち書いてもいいかなと、とりあえず、そのままにすることにした。

jQueryと書くのは面倒だということであれば、次のような感じで$jとかにエイリアスすればよいかと。

var $j = jQuery;
$j(function(){
  $j.ajax({
    url: '/recentbook.php',
    type: 'get',
    timeout: 5000,
    success: function(data){
      $j('#recentbook').html(data);
    }
  });
});

関連記事

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です