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

당신이 입력하면 $콘솔과 언론에 입력 - 당신은 무엇을 볼 수 있습니까?

— zerkms

콘솔에서 $를 실행하면 "정의되지 않음"을받습니다

— Jason

320

기본적으로 당신은 당신이 사용해야합니다 워드 프레스에 jQuery를 대기열에 때 jQuery, 그리고 $(이것은 다른 도서관과의 호환성을위한) 사용되지 않습니다.

그것을 감싸는 솔루션은 function잘 작동하거나 jQuery를 다른 방법으로로드 할 수 있습니다 (그러나 Wordpress에서는 좋지 않습니다).

를 사용해야하는 경우 document.ready실제로 $함수 호출에 전달할 수 있습니다 .

jQuery(function ($) { ...

— 폭발 알약
소스

두 번째 버전을 시도했지만 작동하지 않았지만 첫 번째 버전은 작동했지만 jQuery 호출을 두 배로 늘리지 않기를 원합니다.

— Jason

@Jason 당신은 그것을 필요로하지 않습니다; 내가 정확히 게시 한 것 : jsfiddle.net/vcbYJ

— 폭발 약

이 질문을 볼 수 있습니까? wordpress.stackexchange.com/questions/214858/…

그리고 선택기가 밖에 있다면 jQuery(function ($) { ..., jQuery대신 사용해야 합니다.$

— Misha Rudrastyh

고마워 친구. 감사합니다

— Desper

154

이 문제를 해결해야합니다.

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

간단히 말해 WordPress는 사용자가 직접 스크립트를 실행하고 $var 를 해제하여 다른 라이브러리와 충돌하지 않도록합니다. WordPress는 모든 종류의 웹 사이트, 앱 및 블로그에 사용되므로 완전히 이해됩니다.

그들의 문서에서 :

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 인스턴스를 닫고 동시에 새로운 로컬 인스턴스를 선언합니다. 프로덕션에서 레이아웃을 구현하는 데 몇 초 밖에 걸리지 않거나 많은 워드 프레스 플러그인을 실행하면이 작업을 수행 할 수 있습니다. 그러나 문제를 해결해야한다는 점을 명심하십시오. 이것은 반창고이지만 정보 페이지이면 문제가 없습니다.

— luis

@ Martha James 이것은 나를 위해 작동하므로 포함 시켰습니다. 그것은 다른 사람들을 위해 작동하거나 작동하지 않을 수 있습니다

— Bikram Shrestha

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

8

다음 $과 jQuery 같이 표시를 바꾸십시오 :

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

— 맥시 칸
소스

7

jQuery 참조를 다시 확인하십시오. jQuery가 정의되기 전에 그것을 두 번 이상 참조하거나 너무 일찍 함수를 호출했을 수 있습니다. 내 의견에서 언급 한대로 시도하고 모든 jQuery 참조를 파일 상단 (머리)에 넣고 그것이 도움이되는지 확인할 수 있습니다.

jQuery의 캡슐화를 사용하면이 경우 도움이되지 않습니다. 더 예쁘고 더 분명하다고 생각하기 때문에 시도해보십시오. 그러나 jQuery가 정의되지 않은 경우 동일한 오류가 발생합니다.

결국 ... jQuery는 현재 정의되어 있지 않습니다.

— 라굴 마노 하란
소스

나는 그것이 정의되기 전에 JQuery에 액세스하려고 시도하는 것이 아니라 결국 모든 것을 깨는 것이라고 생각합니다. 당신 의 상단으로 당신의 script참조 JQuery를 이동 시도 index.html하고 아마 작동합니다

— Dan Moldovan

이 답변에는 더 많은 가시성이 필요합니다. 예. 다른 네임 스페이스를 통해로드 된 jQuery 버전으로 표준 네임 스페이스를 사용하는 경우 다른 네임 스페이스가 유효합니다. 그러나 실수로 (그리고 불필요하게) jQuery를 두 번 이상로드하지 않았는지 확인하십시오.

— edkay

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

(함수 ($) {
  "엄격한 사용";

  $ (함수 () {

    // 여기 코드

  });

} (jQuery));

— 샤리프 모하마드 은우 스
소스

3

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

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

이제 jQuery 대신 jq를 사용하십시오.

— 아만 비르 푸리 야
소스

3

함수 이름과 파일의 id 이름 중 하나가 동일한 경우이 문제가 발생합니다. 파일의 모든 ID 이름이 고유한지 확인하십시오.

— Laxman Jaygonde
소스

2

당신이 사용할 수있는

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

또는

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

— 비베 쉬 발라
소스