web-dev-qa-db-ja.com

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

私はこのような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);

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

任意の助けは大歓迎です。

jquerywordpressfunctionwrappertypeerror
187
Jason

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

それをfunctionにラップするという解決策はうまくいくでしょう。あるいはjQueryを他の方法でロードすることもできます（しかしそれはおそらくWordpressではお勧めできません）。

document.readyを使用しなければならない場合は、実際には$を関数呼び出しに渡すことができます。

jQuery(function ($) { ...
280
Explosion Pills

これで解決するはずです。

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のグローバル$ショートカットは利用できません...

135
Matthew Blancarte

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

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

コードをクロージャの内側に移動し、jQueryの代わりに$を使用してください。

私は https://magento.stackexchange.com/questions/33348/uncaught-typeerror-undefined-is-not-a-function-when-using-a-jquery-plugin-in-ma-に上記の解決策を見つけました

...探しすぎた後

21
Bikram Shrestha

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

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

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

Ashwani PanwarとCyssooの回答： https://stackoverflow.com/a/29341144/3010027

16
optimiertes

これを試して：

<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>
13
Jose Carlos Ramos Carmenates

あなたはfunction（）に$を渡さなければなりません

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

// jQuery code is in here

});
</script>
8
Jitendra Damor

JQueryの参照を再確認してください。複数回参照しているか、関数の呼び出しが早すぎる（jQueryが定義される前に）可能性があります。あなたは私のコメントで述べたように試すことができ、あなたのファイルの先頭（頭の中）に任意のjQueryリファレンスを置き、それが助けになるかどうかを確かめることができます。

あなたがjQueryのカプセル化を使用するならば、それはこの場合助けになるべきではありません。私はそれがよりきれいでそしてより明白であると思うのでそれを試してください、しかしjQueryが定義されないならばあなたは同じエラーを受けるでしょう。

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

7
Raghul Manoharan

このように$ signをjQueryに置き換えます。

jQuery(function(){
//your code here
});
5
MaXee Khan

また、私は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
Renish Khunt
（function（$）{
 "use strict"; 
 
 $（function（）{
 
 //ここにあなたのコード[.____ [] 
]}）; 
 
]（jQuery））;
4
Sharif Mohammad Eunus

私にとってうまくいったことインポートする最初のライブラリはクエリライブラリで、 その直後 はjQuery.noConflict（）メソッドを呼び出します。

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

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

今jQueryの代わりにjqを使う

3
Aman birjpuriya

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

3
Laxman Jaygonde

つかいます

jQuery(document).

の代わりに

$(document).

または

関数内では、$は予想通りjQueryを指しています。

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

あなたが使用することができます

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

または

(function ($) { ... }(jQuery));
2
Bhavesh Balar