TypeError：jQuery関数を呼び出すとき、$は関数ではありません

214

次のようなjQueryラッパーを使用しているWordPressプラグインに単純なjQueryスクリプトがあります。

$(document).ready(function(){

    // jQuery code is in here

});

WordPressダッシュボード内からこのスクリプトを呼び出し、jQueryフレームワークが読み込まれた後にスクリプトを読み込んでいます。

Firebugでページを確認すると、常にエラーメッセージが表示されます。

TypeError：$は関数ではありません

$（document）.ready（function（）{

この関数でスクリプトをラップする必要があります。

(function($){

    // jQuery code is in here

})(jQuery);

私はこのエラーを何度か経験しており、それをどのように処理するかわかりません。

どんな助けでも大歓迎です。

— ジェイソン
ソース

3

あなたが入力した場合$、コンソールに、Enterキーを押します-あなたは何を見ていますか？

— zerkms 2012

コンソールで$を実行すると、「未定義」が表示されます

— Jason

320

WordPressでjQueryをエンキューする場合、デフォルトではを使用する必要がありjQuery、$使用されません（これは他のライブラリとの互換性のためです）。

それをラップするソリューションはfunctionうまく機能しますが、jQueryを他の方法でロードすることもできます（ただし、Wordpressではそれはおそらく良いアイデアではありません）。

を使用する必要がある場合はdocument.ready、実際$に関数呼び出しに渡すことができます。

jQuery(function ($) { ...

— 爆発の丸薬
ソース

私は2番目のバージョンを試しましたが、機能しませんでした。最初のバージョンは機能しましたが、jQueryの呼び出しで2倍にならないようにしたいだけです。

— Jason

@ジェイソンあなたはそれを必要としません。私が投稿したものとまったく同じ：jsfiddle.net/vcbYJ

— Explosion Pills

この質問wordpress.stackexchange.com/questions/214858/…

そして、セレクタが外側jQuery(function ($) { ...にある場合は、jQuery代わりに使用する必要があります$

— Misha Rudrastyh

ありがとう兄貴。感謝

— Desper

153

これはそれを修正するはずです：

jQuery(document).ready(function($){
  //you can now use $ as your jQuery object.
  var body = $( 'body' );
});

簡単に言うと、WordPressは独自のスクリプトを実行してから、$他のライブラリと衝突しないように変数を解放します。WordPressはあらゆる種類のWebサイト、アプリ、そしてもちろんブログに使用されているため、これは完全に理にかなっています。

彼らのドキュメントから：

WordPressに含まれているjQueryライブラリはnoConflict（）モードに設定されています（wp-includes / js / jquery / jquery.jsを参照）。これは、WordPressがリンクできる他のJavaScriptライブラリとの互換性の問題を防ぐためです。

noConflict（）モードでは、jQueryのグローバル$ショートカットは使用できません...

— マシュー・ブランカルテ
ソース

28

この解決策は私のために働いた

;(function($){
    // your code
})(jQuery);

コードをクロージャー内に移動して、$代わりに使用しますjQuery

上記の解決策は/magento/33348/uncaught-typeerror-undefined-is-not-a-function-when-using-a-jquery-plugin-in-maで見つかりました

...検索しすぎた後

— ビクラムシュレスタ
ソース

2

素晴らしいソリューション。これが機能する主な理由は、「;」すでにアクティブになっているjqueryの他のインスタンスを閉じ、同時にローカルで別の新しいインスタンスを宣言します。数秒でレイアウトを本番環境に実装する場合や、多数のWordPressプラグインを実行している場合は、これが効果的です。ただし、問題を修正する必要があることに注意してください。これは単なるバンドエイドですが、情報ページの場合は問題ありません。

— luis

@マーサジェームスこれは私のために働くので、それを含めました。それは他の人のために働くかもしれないしそうでないかもしれない

— ビクラムシュレスタ

19

このような衝突を避けることができます

var jq=jQuery.noConflict();
jq(document).ready(function(){  
  alert("Hi this will not conflict now");
  jq('selector').show();
});

— アシュワニパンワー
ソース

7

または$ = jQuery.noConflict（）;

— Cyssoo

17

var $=jQuery.noConflict();

$(document).ready(function(){
    // jQuery code is in here
});

Ashwani PanwarとCyssooの回答のクレジット：https ://stackoverflow.com/a/29341144/3010027

— 楽天
ソース

13

これを試して：

<script language="JavaScript" type="text/javascript" src="jquery/jquery.js"></script>
<script>
    jQuery.noConflict();
    (function ($) {
        function readyFn() {
            // Set your code here!!
        }

        $(document).ready(readyFn); 
    })(jQuery);

</script>

— ホセカルロスラモスカルメナーテス
ソース

8

$をfunction（）に渡す必要があります

<script>
jQuery(document).ready(function($){

// jQuery code is in here

});
</script>

— ジテンドラダモール
ソース

3

これは上記の回答（3年前から）とどう違うのですか？

— rnevius 2016

8

$記号を次のjQuery ように置き換えます：

jQuery(function(){
//your code here
});

— マクシー・カーン
ソース

7

jQuery参照を再確認してください。関数を複数回参照している、または関数の呼び出しが早すぎる（jQueryが定義される前）可能性があります。私のコメントで述べたように試して、jQuery参照をファイルの先頭（先頭）に配置して、それが役立つかどうかを確認できます。

jQueryのカプセル化を使用する場合、この場合は役に立ちません。きれいでわかりやすいと思うので試してみてください。jQueryが定義されていないと、同じエラーが発生します。

結局、jQueryは現在定義されていません。

— ラグール・マノハラン
ソース

何かが定義される前にJQueryにアクセスしようとするのではなく、それがすべてを破壊するのではないかと思います。scriptwhich参照JQueryをあなたの先頭に移動してみてくださいindex.html、それはおそらく機能します

— Dan Moldovan '18

この答えはより多くの可視性を必要とします。はい、他のプラグインを介してロードされたjQueryのバージョンで標準の名前空間が使用されている場合、他の名前空間は有効です。ただし、jQueryを誤って（場合によっては不必要に）ロードしていないことを確認してください。

— エドカイ2017年

6

また、jQuery noConflictモードを使用するための良い解決策を見つけました。

(function($){

  $(document).ready(function(){
      // write code here
  });

  // or also you can write jquery code like this

  jQuery(document).ready(function(){
      // write code here
  });

})(jQuery);

ここからこの解決策を見つけました。 https://thecodingstuff.com/how-to-properly-use-jquery-noconflict-mode-in-wordpress/

— クントを補充する
ソース

5

使用する

jQuery(document).

の代わりに

$(document).

または

関数内で、$は予想どおりjQueryを指します。

(function ($) {
   $(document).
}(jQuery));

— サンジャイ
ソース

4

何がうまくいったか。インポートする最初のライブラリはクエリライブラリで、すぐにjQuery.noConflict（）メソッドを呼び出します。

<head>
 <script type="text/javascript" src="jquery.min.js"/>
 <script>
  var jq = jQuery.noConflict();
  jq(document).ready(function(){
  //.... your code here
    });
 </script>

— PbxMan
ソース

4

（関数（$）{
  「厳密に使用」;

  $（function（）{

    //ここにあなたのコード

  }）;

}（jQuery））;

— シャリフ・モハマド・ユーナス
ソース

3

<script>
var jq=jQuery.noConflict();
(function ($) 
    {
    function nameoffunction()
    {
        // Set your code here!!
    }

    $(document).ready(readyFn); 
    })(jQuery);

jQueryの代わりにjqを使用する

— アマン・ビルジュプリヤ
ソース

3

関数名とファイル内のID名の1つが同じ場合、この問題が発生します。ファイル内のすべてのID名が一意であることを確認してください。

— ラクスマン・ジェイゴンド
ソース

2

使用できます

jQuery(document).read(function(){ ... });

または

(function ($) { ... }(jQuery));

— バベシュバラー
ソース