Development Tip

잡히지 않은 ReferenceError : $가 정의되지 않았습니까?

yourdevel 2020. 10. 2. 23:22
반응형

잡히지 않은 ReferenceError : $가 정의되지 않았습니까?


이 코드는 어떻게

포착되지 않은 참조 오류 : $가 정의되지 않았습니다.

전에 괜찮 았을 때?

$(document).ready(function() {
    $('#tabs > ul').tabs({ fx: { opacity: 'toggle' } });
    $('#featuredvid > ul').tabs();
});

탭의 결과가 더 이상 닫히지 않습니다.

jQuery는 헤더에서 참조됩니다.

<script language="JavaScript" type="text/javascript" src="<?php echo get_option('siteurl') ?>/js/sprinkle.js"></script>
<script language="JavaScript" type="text/javascript" src="<?php echo get_option('siteurl') ?>/js/jquery-1.2.6.min.js"></script>
<script language="JavaScript" type="text/javascript" src="<?php echo get_option('siteurl') ?>/js/jquery-ui-personalized-1.5.2.packed.js"></script>

먼저 jquery 스크립트에 대한 참조를 입력해야합니다.

<script language="JavaScript" type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>
<script language="JavaScript" type="text/javascript" src="/js/jquery-ui-personalized-1.5.2.packed.js"></script>
<script language="JavaScript" type="text/javascript" src="/js/sprinkle.js"></script>

jQuery JavaScript가 포함되기 전에 ready 함수를 호출합니다. 먼저 jQuery를 참조하십시오.


이것이 나를 위해 해결 한 것입니다. 원래 저는 Google에 가서 jQuery에 대한 제안 된 스 니펫을 CDN 페이지에 복사하여 붙여 넣었습니다.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

코드 조각은 포함되지 않습니다 HTTP:또는 HTTPS:src속성을하지만 난 그것을 변경할 수 있도록 브라우저, 파이어 폭스, 그것을 필요로 편집이 잘 구글 크롬에 나를 위해 일한

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

그런 다음 작동했습니다.


jQuery 플러그인이 브라우저에로드되기 전에 사용자 지정 스크립트가로드되면 이러한 유형의 문제가 발생할 수 있습니다. 따라서 jQuery 플러그인을 호출 한 후 항상 고유 한 JavaScript 또는 jQuery 코드를 유지하므로 이에 대한 해결책은 다음과 같습니다.

먼저 GoogleApis에서 호스팅되는 jQuery 파일 또는 http://jquery.com/download/ 에서 다운로드하고 서버 에서 호스팅 할 로컬 jQuery 파일에 대한 링크를 추가 합니다.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

또는 jQuery 용 플러그인. 그런 다음 사용자 지정 스크립트 파일 링크 또는 코드를 입력합니다.

<script src="js/custom.js" type="text/javascript"></script>

제 경우 .js에는 jQuery 스크립트 링크 앞에 파일 을 넣고 jQuery 스크립트 링크 .js뒤에 파일을 넣어 문제를 해결했습니다.

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="exponential.js"></script>

제 문제는 달랐습니다 . Chrome의 문서 보안 모델이었습니다 .

여기에 대한 답변을 보면 $(document).ready()etc. 함수 를 호출하기 전에 jquery 파일을로드하지 않는 것이 분명했습니다 . 그러나 그들은 모두 올바른 위치에있었습니다.

제 경우에는 보안 HTTPS 연결을 통해 콘텐츠에 액세스하는 반면 페이지는 Google 등에서 CDN 호스팅 데이터를 다운로드하려고했기 때문입니다. 해결책은 로컬에 저장 한 다음 직접 포함하는 것이 었습니다. 매번 CDN.

편집 :이 작업을 수행하는 다른 방법은 http : //가 아닌 https : //로 모든 CDN 호스팅 항목에 연결하는 것입니다. 그러면 모델이 불평하지 않습니다.


스크립트를 시작하기 전에 라이브러리를 추가 하십시오. 다음 CDN추가 하여 시작할 수 있습니다.

구글 :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

마이크로 소프트

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>

Jquery

다른 Jquery cdn 버전을 원하면이 링크를 확인 하십시오 .

금후:

<script type="text/javascript">
$(function(){
    //your stuff
});
or
$(document).ready(function(){
    //your stuff
});    
</script>

Wordpress :

<script type="text/javascript">
var $ = jQuery;
jQuery(document).ready(function($){
     //your stuff
});
</script>

워드 프레스의 경우 변경해야 할 수 있습니다.

$(document).ready(function() {

...에

jQuery(document).ready(function($){

또는 추가

var $ = jQuery;

전에

$(document).ready(function() {

나는 똑같은 문제가 있었고 위의 해결책 중 어느 것도 도움이되지 않았습니다. 그러나 .css파일을 연결 한 .js문제가 기적적으로 사라졌습니다. 도움이 되었기를 바랍니다.


제 경우에는 스크립트 호출 순서가 잘못 되었기 때문에이 referenceError가 발생했습니다. 순서를 변경하여 해결했습니다.

<script src="js/index.js"></script>
<script src="js/jquery-1.10.2.js"></script>

...에

<script src="js/jquery-1.10.2.js"></script>
<script src="js/index.js"></script>

내 스크립트를 비동기 로 만들고 싶었습니다 . 그런 다음 나는 그것을 잊었고 라이브로 갔을 때 [custom] .js 파일은 jQuery.js 이전에 50 % 만로드되었습니다.

그래서 나는 변했다

<script async src="js/script.js"></script>

...에

<script src="js/script.js"></script>

ready()jQuery JavaScript가 포함되기 전에 함수를 호출합니다 . 먼저 jQuery를 참조하십시오.

If you're in ASP.NET MVC, you can specify when your JS code should be rendered, by doing this:

1, In your page.cshtml wrap your <script> tag into a section, and give it a name, the common name to use is 'scripts':

@section scripts {
    <script>
        // JS code...
    </script>
}

2, In your _Layout.cshtml page add @RenderSection("Scripts", required: false), make sure to put it after you reference the Jquery source, this will make your JS code render later than the Jquery.


If you are doing this in .Net and have the script file referenced properly and you jQuery looks fine, make sure that your users have access to the script file. The project I was working on (a coworker) had their web.config denying access to anonymous users. The page I was working on was accessible to anonymous users therefore they didn't have access to the script file. Dropped the following into the web.config and all was right in the world:

  <location path="Scripts">
    <system.web>
      <authorization>
        <allow users="*"/>
      </authorization>
    </system.web>
  </location>

I had the same problem , and I solved by putting jQuery at the top of all javascript codes I have in my code.

Something like this:

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="js/app.js" type="text/javascript"></script>
<script src="js/form.js" type="text/javascript"></script>
<script src="js/create.js" type="text/javascript"></script>
<script src="js/tween.js" type="text/javascript"></script>

Hope can help some one in future.


The source file jquery-1.2.6.min.js is not called the jQuery command $() is executed earlier than <..src='jquery-1.2.6.min.js'>.

Please run <.. src="/js/jquery-1.2.6.min.js.."> at first and make sure the src path is right, then execute jquery command

$(document).ready(function() 

This happened to me before.

The reason was that I'm connecting android to a webview with a JS. And I sent a parameter without quotes.

js.sayHello(hello);

and when I changed it to

js.sayHello('hello');

it worked.


In my case it was a typo, I forgot a backslash and was referencing the source incorrectly.

Before src="/scripts/jquery.js"

After    src="scripts/jquery.js"


Your JavaScript file is missing so this error occurred. Just add the JavaScript file inside the <head> tag. See the example:

<script src="js/sample.js" type="text/javascript"></script>
<link href="css/sample.css" rel="stylesheet" type="text/css" />

or add the following code in tag :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

The error will occur in the following two scenarios as well.

  1. @section scripts element is missing from the HTML file
  2. Error in accessing DOM elements. For example accessing of DOM element is mentioned as $("js-toggle") instead of $(".js-toggle"). Actually the period is missing

So 3 things to be followed - check required scripts are added, check if it is added in the required order and third syntax errors in your Java Script.


Doh! I had mixed quotes in my tags that caused the jquery reference to break. Doing an inspect in Chrome allowed me to see that the file wasn't properly linked.


In my case i forgot to include this :

 <script src ="jquery-2.1.1.js"></script>

Earlier I was including just jquery-mobile which was causing this error.


I modified the script tag to point to the right content and changed the script order to be the right one in the editor. But totally forgot to save the change.


I had a similar issue and it was because I was missing a closing > on a style sheet link.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="local_xxx.js"></script>

I have similar issue, and you know what, it's because of network is disconnected when I test in android device webview and I don't realize it, and the local js no problem to load because it doesn't need network. It seems ridiculous but it waste my ~1 hour to figure out it.


Strange enough, my problem was coming from PHP.

A REST API call was failing, and it was breaking the loading of the libraries afterwards. Since failure was from the REST call, it was not giving me a php compile error.

Keep this as an option also, if loading jquery seems ok.


I had this issue, when I was browsing internet through my mobile hotspot. it was also compressing images and added the following script at the bottom of body tag

<script language="javascript"><!--
bmi_SafeAddOnload(bmi_load,"bmi_orig_img");//-->
</script>

When I connected to proper wifi connection, all seems to work find for me. Hope this help someone.


I had similar issue. My test server was working fine with "http". However it failed in production which had SSL.

Thus in production, I added "HTPPS" instead of "HTTP" and in test, i kept as it is "HTTP".

Test:

wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', array(), null, false );

wp_register_script( 'custom-script', plugins_url( '/js/custom.js', FILE ), array( 'jquery' ) );

Production:

wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', array(), null, false );

wp_register_script( 'custom-script', plugins_url( '/js/custom.js', FILE ), array( 'jquery' ) );

Hope this will help someone who is working on wordpress.


This can also happen, if there is network issue. Which means, that even though the " jquery scripts " are in place, and are included prior to usage, since the jquery-scripts are not accessible, at the time of loading the page, hence the definitions to the "$" are treated as "undefined references".

FOR TEST/DEBUG PURPOSES :: You can try to access the "jquery-script" url on browser. If it is accessible, your page, should load properly, else it will show the said error (or other script relevant errors). Example - http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js should be accessible, on the browser (or browser context stances).

I had similar problem, in which I was able to load the html-page (using scripts) in my windows-host-browser, but was not able to load in vm-ubuntu. Solving the network issue, got the issue resolved.


var $ = jQuery;
jQuery(document).ready(function($){

Root problem is a ReferenceError. MDN indicates that a try/catch block is the proper tool for the job. In my case, I was getting uncaught reference error for a payment sdk/library. The below works for me.

try {
  var stripe = Stripe('pk_test_---------');
} catch (e) {
    stripe = null;
}

if(stripe){
  //we are good to go now
}

Obviously the fix is to load whatever SDK/library, e.g. jQuery, prior to calling its methods but the try/catch does keep your shared JavaScript from barfing up errors in case you run that shared script on a page that doesn't load whatever library you use on a subset of pages.

참고URL : https://stackoverflow.com/questions/2075337/uncaught-referenceerror-is-not-defined

반응형