Rozwiązywanie problemu jQuery nie jest zdefiniowane” Błąd

Błąd „jQuery nie jest zdefiniowany” jest częstą przeszkodą napotykaną podczas tworzenia stron internetowych, szczególnie w przypadku osób, które dopiero zaczynają integrować jQuery, powszechnie używaną bibliotekę JavaScript, ze stronami internetowymi. Ten komunikat o błędzie pojawia się w konsoli przeglądarki, gdy kod JavaScript próbuje wykorzystać składnię lub funkcje jQuery przed załadowaniem biblioteki lub jeśli w ogóle nie został załadowany. Zasadniczo jest to sposób, w jaki przeglądarka mówi: „Nie wiem, czym jest jQuery”, co prowadzi do natychmiastowego zatrzymania wykonywania wszelkich skryptów związanych z jQuery.

Odmiany błędu

Błąd „jQuery nie jest zdefiniowany” może objawiać się na różne sposoby, w zależności od przeglądarki, środowiska (np. środowiska programistycznego lub serwera produkcyjnego) lub sposobu umieszczenia skryptu na stronie internetowej. Niektóre typowe odmiany tego komunikatu o błędzie obejmują:

• jQuery nie jest zdefiniowane
• $ nie jest zdefiniowane
• Nieprzechwycony błąd odniesienia: $ nie jest zdefiniowany
• Nieprzechwycony błąd odniesienia: jQuery nie jest zdefiniowane
• ReferenceError: jQuery nie jest zdefiniowane
• ReferenceError: $ nie jest zdefiniowane
• TypBłąd: $(…). nie jest funkcją
• TypBłąd: jQuery(…). nie jest funkcją

Zrozumienie „jQuery nie jest zdefiniowane” w WordPress

W ekosystemie WordPress jQuery jest szeroko wykorzystywane przez motywy i wtyczki w celu zwiększenia interaktywności i poprawy komfortu użytkowania. Być może wtyczka, której używasz, została zaprojektowana tak, aby wykorzystywać funkcjonalność jQuery — suwaki, wyskakujące okienka, sprawdzanie poprawności formularzy i nie tylko. Kiedy przeglądarka zgłasza, że ​​„jQuery nie jest zdefiniowane”, oznacza to zasadniczo, że JavaScript Twojej witryny próbuje wywołać funkcje jQuery przed załadowaniem samego jQuery lub w ogóle nie został załadowany.

Typowe przyczyny tego błędu w WordPress

Do tego błędu może prowadzić kilka scenariuszy specyficznych dla WordPressa, w tym:

Motywy i wtyczki : przyczyną tego problemu może być motyw lub wtyczka, która nieprawidłowo kolejkuje jQuery lub opiera się na nieaktualnej wersji.

Ręczne zmiany : niestandardowe zmiany w plikach motywów, zwłaszcza jeśli jQuery zostało ręcznie wyrejestrowane lub nieprawidłowo umieszczone w kolejce, mogą spowodować ten błąd.

Konflikty : czasami zainstalowanie wielu wtyczek, z których każda próbuje załadować własne wersje jQuery, może prowadzić do konfliktów, a w konsekwencji do błędu.

Ogólne przyczyny tego błędu

Nieprawidłowa kolejność skryptów : najczęstszą przyczyną jest to, że Twoja strona HTML próbuje użyć jQuery przed jej załadowaniem.Skrypty korzystające z jQuery muszą być umieszczone po tagu<script> biblioteki jQuery .

Nieuwzględnienie jQuery : po prostu zapomnienie o włączeniu jQuery na swojej stronie internetowej może spowodować ten błąd.Upewnij się, że masz tag<script> , który poprawnie pozyskuje bibliotekę jQuery.

Biblioteki powodujące konflikt : czasami inne biblioteki lub skrypty JavaScript mogą powodować konflikt z jQuery, zwłaszcza jeśli używają również symbolu $. Może to nieumyślnie spowodować nadpisanie lub niepoprawną inicjalizację jQuery.

Problemy z buforowaniem : w niektórych przypadkach Twoja przeglądarka może buforować starą wersję Twojej strony internetowej, która nie zawierała jQuery, lub ścieżka do jQuery może być niepoprawna, co prowadzi do niepowodzenia w ładowaniu biblioteki.

Problemy z siecią dostarczania treści (CDN) : jeśli ładujesz jQuery z sieci CDN, a sieć CDN nie działa lub jest nieosiągalna, Twoja witryna nie będzie mogła załadować biblioteki, co powoduje ten błąd.

Jak naprawić błąd niezdefiniowany jQuery

Przed wprowadzeniem jakichkolwiek zmian niezbędne jest wykonanie pełnej kopii zapasowej witryny. Jeśli masz dostęp do środowiska testowego lub programistycznego, możesz użyć tego środowiska, aby naprawić błąd i ominąć wszelkie potencjalne zakłócenia wynikające z bezpośrednich edycji w działającej witrynie.

Dzięki tym zabezpieczeniom możesz uporać się z błędem „jQuery nie jest zdefiniowany”.

Sprawdź, czy jQuery jest załadowane, testując źródło skryptu

Jedną z częstych przyczyn tego problemu jest to, że chociaż jQuery może być uwzględnione, nie jest ono poprawnie ładowane z różnych powodów, takich jak nieprawidłowe adresy URL, problemy z siecią lub uprawnienia dostępu do plików. Aby sprawdzić, czy jQuery jest poprawnie załadowany, prosty, ale skuteczny sposób polega na przetestowaniu źródła skryptu bezpośrednio w przeglądarce.

Kroki testowania źródła skryptu jQuery

1. Po pierwsze, musisz zlokalizować tag skryptu, który zawiera jQuery w kodzie HTML. Znacznik ten jest kluczowy, gdyż określa źródło, z którego ma zostać załadowane jQuery. Poszukaj w swoim kodzie linii wyglądającej tak:

 <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>

2. Ten atrybut src zawiera adres URL biblioteki jQuery, którą próbujesz załadować.
3. Wyodrębnij adres URL z atrybutu src znacznika skryptu.To jest bezpośredni link do pliku jQuery, który umieszczasz w swojej witrynie. Upewnij się, że dokładnie kopiujesz cały adres URL, łącznie z częściąhttp:// lub https://na początku.
4. Otwórz nową kartę lub okno w przeglądarce internetowej i wklej skopiowany adres URL w pasku adresu. Naciśnij Enter, aby przejść do tego adresu URL.

Jeśli plik jQuery zostanie poprawnie załadowany, cała zawartość biblioteki jQuery zostanie wyświetlona w przeglądarce jako zwykły tekst. Oznacza to, że źródło skryptu jQuery jest dostępne i działa zgodnie z oczekiwaniami.

Alternatywne metody weryfikacji ładowania jQuery

Jak sprawdzić ładowanie jQuery poprzez źródło strony

1. Przejdź do strony internetowej, którą chcesz sprawdzić, korzystając z preferowanej przeglądarki internetowej.
2. Kliknij prawym przyciskiem myszy w dowolnym miejscu strony internetowej i wybierz opcjęWyświetl źródło strony z menu kontekstowego.Ta opcja może się nieznacznie różnić w zależności od przeglądarki.
3. Po otwarciu kodu źródłowego będziesz musiał teraz znaleźć skrypt jQuery. Można to łatwo zrobić, korzystając z funkcji wyszukiwania wbudowanej w przeglądarkę:
4. NaciśnijCtrl+F w systemie Windows lub Command+Fna komputerze Mac, aby otworzyć pasek wyszukiwania.
5. Wpiszjquery w polu wyszukiwania i naciśnij Enter.Ta akcja podświetli wszystkie wystąpienia jquery w kodzie źródłowym.
6. Poszukaj linii w podświetlonych wynikach, która przypomina znacznik skryptu łączący się z biblioteką jQuery.

Może to wyglądać mniej więcej tak:

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

lub dla lokalnie hostowanego jQuery, coś takiego:

 <script src="/path/to/jquery.min.js"></script>

Jeśli znajdziesz taką linię, oznacza to, że na Twojej stronie znajduje się jQuery. Jeśli nie, jQuery może nie zostać załadowane, co może być przyczyną występujących problemów.

Korzystanie z narzędzi programistycznych w celu sprawdzenia ładowania jQuery

1. Wejdź na swoją stronę internetową i otwórz narzędzia programistyczne w swojej przeglądarce. Zwykle można to zrobić, klikając stronę prawym przyciskiem myszy i wybierając opcjęSprawdź lub naciskając klawisz F12lubCtrl+Shift+I(Windows) /Cmd+Option+I(Mac).
2. W narzędziach programistycznych znajdź i kliknij kartęSieć .Na tej karcie wyświetlane są wszystkie żądania sieciowe wysyłane przez Twoją witrynę podczas jej ładowania.
3. Zaznacz opcjęWyłącz pamięć podręczną i przy otwartej karcie Sieć załaduj ponownie swoją witrynę, aby zarejestrować wszystkie działania związane z ładowaniem.
4. Użyj opcji filtrowania, aby zawęzić wyniki do plików JavaScript. Zwykle można to zrobić, wybierając filtr JS lub wpisując jqueryw polu filtru/wyszukiwania.
5. Przewiń listę ładowanych skryptów lub skorzystaj z funkcji wyszukiwania w zakładce Sieć, aby znaleźć wpisy związane z jQuery. Szukasz pliku zawierającego w nazwiejquery , co wskazuje, że trwa ładowanie biblioteki jQuery.

Upewnij się, że jQuery jest poprawnie zawarte w WordPress

Jeśli okaże się, że jQuery nie jest ładowany lub mimo jego obecności napotykasz problemy, może być konieczne upewnienie się, że jest on poprawnie uwzględniony w motywie lub wtyczce WordPress. WordPress oferuje solidny sposób zarządzania skryptami za pomocą funkcji wp_enqueue_script .Ta metoda jest preferowana, ponieważ skutecznie obsługuje zależności skryptów i pomaga uniknąć konfliktów.

Kolejkuj jQuery w WordPress

1. Połącz się ze swoją witryną WordPress za pomocą klienta FTP lub menedżera plików dostarczonego przez usługę hostingową.
2. Przejdź dofolderu motywu i znajdź plik Functions.php. Zaleca się utworzenie motywu podrzędnego i wprowadzenie w nim zmian, aby uniknąć utraty dostosowań po aktualizacji motywu.
3. Jeśli brakuje jQuery, możesz umieścić go w kolejce, dodając następujący fragment kodu doplikufunctions.php :

 funkcja my_theme_enqueue_scripts() {

 wp_enqueue_script('jquery');

}

add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');

Dzięki temu WordPress będzie zawierał jQuery na wszystkich stronach Twojej witryny.

Jeśli dodajesz niestandardowe skrypty zależne od jQuery, pamiętaj o umieszczeniu jQuery jako zależności, tak jak poniżej:

 wp_enqueue_script( 'niestandardowy-skrypt', get_template_directory_uri() '/js/custom-script.js', array('jquery'), '1.0', true );

Zaimplementuj lokalną rezerwę za pomocą jQuery hostowanego przez Google

Dołączanie do witryny internetowej wersji jQuery hostowanej przez Google to powszechna praktyka polegająca na korzystaniu z sieci CDN Google w celu szybkiego i niezawodnego dostarczania tej popularnej biblioteki JavaScript. Aby jednak mieć pewność, że Twoja witryna pozostanie odporna na potencjalne awarie CDN lub problemy z siecią, kluczowe znaczenie ma wdrożenie lokalnego rozwiązania awaryjnego. Ta konfiguracja pozwala Twojej witrynie automatycznie używać lokalnie hostowanej wersji jQuery, jeśli z jakiegoś powodu wersja hostowana przez Google nie zostanie załadowana. Ta metoda jest zgodna z najlepszymi praktykami tworzenia stron internetowych, optymalizując wydajność przy jednoczesnym zapewnieniu redundancji. Poniżej znajduje się przewodnik krok po kroku, jak skutecznie wdrożyć tę strategię.

Dołącz bibliotekę jQuery hostowaną przez Google

Najpierw musisz dodać do swojej witryny tag skryptu jQuery hostowany przez Google. Umieść ten tag w sekcji <head> dokumentu HTML lub tuż przed tagiem zamykającym </body>, aby mieć pewność, że inne skrypty zależne od jQuery będą mogły go używać. Na przykład:

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

Dodaj lokalny skrypt zastępczy

Zaraz po tagu skryptu dla jQuery hostowanego przez Google dodasz mały fragment kodu JavaScript. Ten skrypt sprawdza, czy jQuery zostało pomyślnie załadowane z Google CDN. Jeśli nie, dynamicznie zapisuje nowy znacznik skryptu do dokumentu HTML, aby załadować jQuery z lokalnego źródła.

 <skrypt>

 okno.jQuery || document.write('<script src="/path/to/local/jquery-3.5.1.min.js"><\/script>');

</skrypt>

Pamiętaj, aby zastąpić„/path/to/local/jquery-3.5.1.min.js” poprawną ścieżką do pliku jQuery hostowanego na Twoim serwerze.

Zrozumienie kodu

window.jQuery : Ta część skryptu sprawdza, czy obiekt jQuery jest dostępny globalnie, co oznacza, że ​​jQuery zostało pomyślnie załadowane.

document.write : Ta metoda służy do wstawiania kodu HTML do dokumentu.Służy tutaj do dodania znacznika skryptu do lokalnego pliku jQuery, jeśli wersja CDN nie jest załadowana. Sekwencja ucieczki<\/skrypt> służy do zapobiegania interpretowaniu ciągu znaków jako końca bloku skryptu.

Zrozumienie mechanizmu awaryjnego

Mechanizm awaryjny działa na podstawie prostego sprawdzenia: window.jQuery .Jeśli obiekt jQuery nie jest zdefiniowany, oznacza to, że wersja CDN nie została poprawnie załadowana. Następnie używana jest metodadocument.write do wstrzyknięcia nowego znacznika <script>, który ładuje jQuery z pliku lokalnego.

Korzyści

• Zapewnia, że ​​jQuery jest zawsze dostępne, nawet w przypadku awarii CDN.
• Lokalne ładowanie jQuery może w niektórych scenariuszach zmniejszyć opóźnienia, zwłaszcza jeśli wersja CDN wolno reaguje lub jeśli w sieci użytkownika występują problemy z połączeniem się z siecią CDN.
• Posiadanie kopii lokalnej daje kontrolę nad używaną wersją jQuery, umożliwiając spójne testowanie i debugowanie.

Dodaj fragment do pliku wp-config.php

Jeśli bez powodzenia próbowałeś różnych metod rozwiązania błędu „nie zdefiniowano jQuery” lub podobnych problemów z JavaScriptem w WordPressie, wyłączenie łączenia skryptów może być przydatnym krokiem w rozwiązaniu problemu. Łączenie skryptów to funkcja WordPress, która łączy wiele plików JavaScript w jedno żądanie, aby skrócić czas ładowania. Może to jednak czasami powodować błędy lub problemy z ładowaniem skryptu, zwłaszcza jeśli występuje konflikt lub określony skrypt nie ładuje się poprawnie.

Edycja pliku wp-config.php

Użyj klienta FTP lub menedżera plików dostarczonego przez panel sterowania hostingu, aby uzyskać dostęp do plików witryny WordPress.

Otwórz plik wp-config.php w edytorze tekstu.Jeśli korzystasz z klienta FTP, musisz najpierw pobrać plik, otworzyć go w edytorze tekstu na komputerze, a następnie przesłać go ponownie po edycji. Jeśli używasz menedżera plików w panelu sterowania hostingu, zazwyczaj możesz edytować plik bezpośrednio w przeglądarce.

Przewiń plik na dół, tuż przed linią/* To wszystko, przestań edytować!Miłego blogowania.*/ .Tutaj wklej następujący fragment kodu:

 /** Bezwzględna ścieżka do katalogu WordPress. */

 if (!definiowane('ABSPATH') )

 zdefiniuj('ABSPATH', nazwakatalogu(__PLIK__). '/');

 zdefiniuj('CONCATENATE_SCRIPTS', fałsz);

Po dodaniu fragmentu zapisz zmiany. Jeśli edytujesz plik lokalnie na swoim komputerze, pamiętaj o przesłaniu go z powrotem na serwer, zastępując istniejący plikwp-config.php .

Zrozumienie fragmentu

Definicja ABSPATH : Ta linia zapewnia prawidłowe zdefiniowanie bezwzględnej ścieżki do katalogu WordPress, co jest podstawowym wymogiem prawidłowego działania WordPressa.

Wyłączanie konkatenacji : Linia `define('CONCATENATE_SCRIPTS', false);` wyraźnie informuje WordPress, aby nie łączył skryptów.Może to pomóc w debugowaniu problemów ze skryptami poprzez ładowanie każdego skryptu osobno, co ułatwia identyfikację, który skrypt może powodować problemy.

Ręcznie dodaj bibliotekę jQuery

Ręczne dołączenie biblioteki jQuery bezpośrednio do plikuheader.php motywu WordPress jest prostym podejściem, zwłaszcza gdy inne metody rozwiązywania problemów związanych z jQuery nie przyniosły skutku.Ta metoda zapewnia załadowanie jQuery na początku procesu renderowania strony, co zmniejsza ryzyko wystąpienia błędów „jQuery nie jest zdefiniowane”.

Jak ręcznie dołączyć bibliotekę jQuery

1. Przejdź do strony Biblioteki hostowane przez Google, aby uzyskać dostęp do najnowszej wersji jQuery.
2. Znajdź najnowszą wersję jQuery wymienioną na stronie i skopiuj dostarczony tag skryptu. T
3. Użyj klienta FTP lub menedżera plików dostarczonego przez usługę hostingową, aby uzyskać dostęp do plików witryny WordPress.
4. W katalogu WordPress przejdź dowp-content/themes/your-theme-folder/ i znajdź plik header.php. Zastąpfolder your-theme-folder rzeczywistą nazwą swojego motywu.
5. Otwórz plik header.php w edytorze tekstu.Jeśli używasz menedżera plików za pośrednictwem panelu sterowania hostingu, możesz edytować plik bezpośrednio w przeglądarce.



6. Wklej tag skryptu jQuery skopiowany z bibliotek hostowanych przez Google zaraz po tagu otwierającym<head> w pliku header.php. Umieszczenie go w pobliżu górnej części sekcji head gwarantuje, że jQuery zostanie załadowane wcześniej i będzie dostępne dla wszystkich zależnych od niego skryptów.

Na przykład,

 <głowa>

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

 <!-- Pozostała treść Twojej głowy poniżej -->

7. Po dodaniu tagu skryptu zapisz plikheader.php .Jeśli edytowałeś plik lokalnie na swoim komputerze, nie zapomnij przesłać go z powrotem na serwer, zastępując starą wersję pliku.

Ważne uwagi

Motyw podrzędny : jeśli wprowadzasz zmiany bezpośrednio w motywie, najlepszą praktyką jest użycie motywu podrzędnego.Zapobiega to zastąpieniu zmian podczas aktualizacji motywu nadrzędnego.

Przetestuj swoją witrynę : po ręcznym dodaniu jQuery dokładnie przetestuj swoją witrynę, aby upewnić się, że skrypty działają zgodnie z oczekiwaniami i że nie ma problemów ze zgodnością.

Zamykanie myśli

Na naszym blogu omawialiśmy różne rozwiązania mające na celu rozwiązanie błędu „jQuery nie jest zdefiniowane”, podkreślając znaczenie zapewnienia prawidłowego załadowania i wdrożenia jQuery na stronie internetowej. Omówiliśmy sprawdzanie obecności jQuery poprzez kontrolę źródła strony i kartę Sieć w przeglądarce, a także omawialiśmy zwiększanie niezawodności witryny za pomocą jQuery hostowanego przez Google uzupełnionego lokalną rezerwą. Dodatkowo zbadaliśmy zaawansowane techniki rozwiązywania problemów z WordPressem, takie jak wyłączenie łączenia skryptów w pliku wp-config.php i ręczne dodanie jQuery do pliku header.phpmotywu. Przez cały czas nacisk kładziono na ostrożne praktyki edycyjne, w tym używanie środowisk przejściowych i motywów potomnych do bezpiecznych modyfikacji, aby zachować funkcjonalność witryny i wygodę użytkownika.