Uncaught ReferenceError: $ nie jest zdefiniowany?

Dlaczego ten kod rzuca

Uncaught ReferenceError: $ nie jest zdefiniowany

kiedy wcześniej było OK?

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

Wyniki w zakładkach już się nie zamykają.

W nagłówku znajduje się odwołanie do 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>

Najpierw należy umieścić odniesienia do skryptów 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>

Wywołujesz funkcję gotowości przed włączeniem JavaScript jQuery. Najpierw odwołaj się do jQuery.

To właśnie dla mnie to rozwiązało. Pierwotnie poszedłem do Google i skopiowałem i wkleiłem sugerowany fragment kodu jQuery na stronie CDN:

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

Fragment nie zawiera atrybutu HTTP:lub HTTPS:w srcatrybucie, ale moja przeglądarka FireFox go potrzebowała, więc zmieniłem ją na: edytuj: działało to również w przypadku Google Chrome

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

Potem zadziałało.

Jeśli skrypt niestandardowy zostanie załadowany przed załadowaniem wtyczki jQuery do przeglądarki, może wystąpić ten problem. Dlatego po wywołaniu wtyczki jQuery zawsze zachowuj własny kod JavaScript lub kod jQuery, więc rozwiązaniem tego jest:

Najpierw dodaj link do pliku jQuery hostowanego na GoogleApis lub lokalnego pliku jQuery, który pobierzesz ze strony http://jquery.com/download/ i udostępnisz na swoim serwerze:

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

lub dowolną wtyczkę do jQuery. Następnie umieść link lub kod niestandardowego pliku skryptu:

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

W moim przypadku umieszczałem .jsplik przed łączem skryptu jQuery, umieszczając .jsplik po rozwiązaniu problemu przez łącze skryptu jQuery.

<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>

Okej, mój problem był inny - był to model ochrony dokumentów w Chrome .

Patrząc na odpowiedzi tutaj, było oczywiste, że jakoś nie ładowałem moich plików jquery przed wywołaniem $(document).ready() funkcji itp. Wszyscy jednak byli na właściwych pozycjach.

W moim przypadku było to spowodowane tym, że uzyskiwałem dostęp do zawartości za pośrednictwem bezpiecznego połączenia HTTPS, podczas gdy strona próbowała pobrać dane hostowane przez CDN z Google itp. Rozwiązaniem było przechowywanie ich lokalnie, a następnie włączenie ich bezpośrednio zamiast z CDN za każdym razem.

Edycja : Innym sposobem na zrobienie tego jest link do wszystkich rzeczy hostowanych w CDN jako https: // zamiast http: // - wtedy model nie narzeka.

Dodaj bibliotekę przed uruchomieniem skryptu. Możesz dodać dowolny z poniższych CDN, aby go uruchomić.

Google:

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

Microsoft

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

Jquery

Jeśli chcesz mieć inną wersję CDN Jquery, sprawdź ten link .

Po tym:

<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>

Jeśli jest w Wordpress, może być konieczne, aby zmienić

$(document).ready(function() {

do

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

lub dodaj

var $ = jQuery;

przed

$(document).ready(function() {

Miałem dokładnie ten sam problem i żadne z powyższych rozwiązań nie pomogło. jednak po prostu połączyłem .csspliki po .jsplikach i problem cudownie zniknął. Mam nadzieję że to pomoże.

Chciałem spróbować uczynić mój skrypt asynchronicznym . Potem zapomniałem o tym i kiedy uruchomiłem, plik [niestandardowy] .js ładował się tylko 50% czasu przed plikiem jQuery.js.

Więc się zmieniłem

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

do

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

W moim przypadku miałem ten referencyjny błąd, ponieważ kolejność wywołań skryptów była nieprawidłowa. Rozwiązano to poprzez zmianę kolejności:

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

do

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

Miałem ten sam problem i rozwiązałem go, umieszczając jQuery na początku wszystkich kodów javascript, które mam w kodzie.

Coś takiego:

<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>

Nadzieja może komuś pomóc w przyszłości.

Wywołujesz tę ready()funkcję, zanim jQuery JavaScript zostanie dołączony. Najpierw odwołaj się do jQuery.

Jeśli korzystasz z ASP.NET MVC, możesz określić, kiedy ma być renderowany kod JS, wykonując następujące czynności:

1 W swojej page.cshtmlowinąć <script>tag w sekcji i nadać mu nazwę, nazwę potoczną do użytku jest „skrypty”:

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

2, Na _Layout.cshtmlstronie dodaj @RenderSection("Scripts", required: false), pamiętaj o umieszczeniu go po odwołaniu do źródła Jquery, spowoduje to, że kod JS będzie renderowany później niż Jquery.

Jeśli robisz to w .Net i poprawnie odwołujesz się do pliku skryptu, a jQuery wygląda dobrze, upewnij się, że użytkownicy mają dostęp do pliku skryptu. Projekt, nad którym pracowałem (współpracownik), miał swój web.config odmawiający dostępu anonimowym użytkownikom. Strona, nad którą pracowałem, była dostępna dla anonimowych użytkowników, dlatego nie mieli dostępu do pliku skryptu. Upuściłem następujące elementy do pliku web.config i wszystko było na świecie:

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

W moim przypadku była to literówka, zapomniałem odwrotnego ukośnika i niepoprawnie odwoływałem się do źródła.

Przed src="/scripts/jquery.js"

Po    src="scripts/jquery.js"

Plik źródłowy jquery-1.2.6.min.jsnie nazywa się polecenie jQuery $()jest wykonywane wcześniej niż<..src='jquery-1.2.6.min.js'> .

<.. src="/js/jquery-1.2.6.min.js..">Najpierw uruchom i upewnij się, że ścieżka src jest poprawna, a następnie uruchom komendę jquery

$(document).ready(function() 

Zdarzyło mi się to wcześniej.

Powodem było to, że podłączam Androida do widoku internetowego za pomocą JS. I wysłałem parametr bez cudzysłowów.

js.sayHello(hello);

a kiedy to zmieniłem na

js.sayHello('hello');

zadziałało.

Brak pliku JavaScript, więc wystąpił ten błąd. Wystarczy dodać plik JavaScript wewnątrz <head>tagu. Zobacz przykład:

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

lub dodaj następujący kod w tagu:

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

Błąd wystąpi również w następujących dwóch scenariuszach.

1. W pliku HTML brakuje elementu @section scripts
2. Błąd podczas uzyskiwania dostępu do elementów DOM. Na przykład dostęp do elementu DOM jest wymieniony jako $ („js-toggle”) zamiast $ („. Js-toggle”). W rzeczywistości brakuje okresu

A więc 3 rzeczy, których należy przestrzegać - sprawdź, czy wymagane skrypty zostały dodane, sprawdź, czy są dodane w wymaganej kolejności i czy występują trzecie błędy składniowe w skrypcie Java.

Doh! W tagach miałem mieszane cytaty, które spowodowały uszkodzenie referencji jquery. Przeprowadzenie inspekcji w Chrome pozwoliło mi stwierdzić, że plik nie został poprawnie połączony.

W moim przypadku zapomniałem dołączyć:

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

Wcześniej dołączałem tylko jquery-mobile, który powodował ten błąd.

Zmodyfikowałem tag skryptu, aby wskazywał odpowiednią treść, i zmieniłem kolejność skryptów, aby była poprawna w edytorze. Ale całkowicie zapomniałem zapisać zmianę.

Miałem podobny problem i to dlatego, że brakowało> zamknięcia linku do arkusza stylów.

<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>

Mam podobny problem i wiesz, co to jest, ponieważ sieć jest rozłączona, gdy testuję w widoku urządzenia z Androidem i nie zdaję sobie z tego sprawy, a lokalny js nie ma problemu z załadowaniem, ponieważ nie potrzebuje sieci. To wydaje się śmieszne, ale marnowanie mojej ~ 1 godziny to rozgryźć.

Nie masz odniesienia do biblioteki jQuery.

Musisz umieścić linię podobną do tej w swoim HTML:

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

Miałem podobny problem. Mój serwer testowy działał poprawnie z „http”. Jednak nie powiodło się w produkcji, która miała SSL.

Tak więc w produkcji dodałem „HTPPS” zamiast „HTTP”, a w teście zachowałem, że to „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' ) );

Produkcja:

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' ) );

Mam nadzieję, że pomoże to komuś, kto pracuje nad wordpress.

Dziwne, mój problem pochodził z PHP.

Wywołanie interfejsu API REST nie powiodło się, a następnie przerywało ładowanie bibliotek. Ponieważ błąd był spowodowany wywołaniem REST, nie dało mi to błędu kompilacji php.

Zachowaj to również jako opcję, jeśli ładowanie jquery wydaje się prawidłowe.

Miałem ten problem, kiedy przeglądałem internet przez mój mobilny punkt dostępu. kompresował także obrazy i dodał następujący skrypt na dole tagu body

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

Po podłączeniu do właściwego połączenia Wi-Fi wszystko wydaje się działać dla mnie. Mam nadzieję, że komuś to pomoże.

Może się to również zdarzyć, jeśli występuje problem z siecią. Co oznacza, że ​​mimo że „skrypty jquery” są na miejscu i są uwzględnione przed użyciem, ponieważ skrypty jquery nie są dostępne, w momencie wczytywania strony, stąd definicje „$” są traktowane jako „niezdefiniowane odniesienia”.

DLA CELÓW TESTU / DEBUGOWANIA :: Możesz spróbować uzyskać dostęp do adresu URL „skryptu jquery” w przeglądarce. Jeśli jest dostępna, twoja strona powinna się poprawnie załadować, w przeciwnym razie pokaże wspomniany błąd (lub inne błędy związane ze skryptem). Przykład - http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js powinien być dostępny w przeglądarce (lub w jej stanach kontekstowych).

Miałem podobny problem, w którym mogłem załadować stronę HTML (używając skryptów) w mojej przeglądarce Windows-Host-przeglądarka, ale nie byłem w stanie załadować w vm-ubuntu. Rozwiązując problem z siecią, problem został rozwiązany.

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