JQuery - $ nie jest zdefiniowany


486

Mam proste zdarzenie kliknięcia jquery

<script type="text/javascript">
    $(function() {
        $('#post').click(function() {
            alert("test"); 
        });
    });
</script>

oraz odwołanie do jquery zdefiniowane w site.master

<script src="<%=ResolveUrl("~/Scripts/jquery-1.3.2.js")%>" type="text/javascript"></script>

Sprawdziłem, czy skrypt jest poprawnie rozwiązany, widzę znaczniki i przeglądam skrypt bezpośrednio w firebug, więc muszę zostać znaleziony. Nadal jednak otrzymuję:

$ nie jest zdefiniowane

i żadna z jquery nie działa. Próbowałem również różnych odmian tego, takich jak $ (dokument) .ready i jQuery itp.

Jest to aplikacja MVC 2 w .net 3.5, jestem pewien, że jestem naprawdę gęsta, wszędzie w Google mówi, aby sprawdzić, czy plik jest poprawnie przywołany, co sprawdziłem i sprawdziłem ponownie, proszę doradzić! : /


6
Czy faktycznie widzisz plik jquery-1.3.2.js, o który prosi się i ładowany jest kod odpowiedzi HTTP200, jeśli sprawdzasz ładowanie strony za pomocą narzędzia Fiddler?
naiwiści

18
czy twój skrypt wykonuje się przed jquery?
Surya

2
Czy możesz wyświetlić źródło i kliknąć link js. Wygląda na to, że twoja jquery nie jest ładowana na stronie. Wypróbuj ekran konsoli Firebug, aby zobaczyć błędy Spróbuj także ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js w tagu skryptu
nemke

2
Czy skrypt jest uruchamiany przed załadowaniem źródła jquery?
Dave Bacher

1
@ Surya / Dave, teraz wróciłem do domu, więc sprawdzę to jutro i wrócę i piszę, ale myślę, że to chyba problem: / jak żenujące!
Paul Creasey

Odpowiedzi:


560

Ten błąd może być spowodowany tylko jedną z trzech rzeczy:

  1. Twój plik JavaScript nie jest poprawnie ładowany na twoją stronę
  2. Masz nieudaną wersję jQuery. Może się to zdarzyć, ponieważ ktoś edytował plik podstawowy lub wtyczka mogła nadpisać zmienną $.
  3. Masz JavaScript działający, zanim strona zostanie w pełni załadowana, i jako taki, zanim jQuery zostanie w pełni załadowany.

Przede wszystkim upewnij się, jaki skrypt jest wywoływany poprawnie, powinien on wyglądać

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

i nie powinien mieć atrybutów asynchronizujących lub odraczających .

Następnie powinieneś sprawdzić panel sieci Firebug , aby sprawdzić, czy plik jest właściwie ładowany poprawnie. Jeśli nie, zostanie podświetlony na czerwono, a obok niego będzie napisane „404”. Jeśli plik ładuje się poprawnie, oznacza to, że problem ma numer 2.

Upewnij się, że cały kod javascript jQuery jest uruchamiany w bloku kodu, takim jak:

$(document).ready(function () {
  //your code here
});

Zapewni to ładowanie kodu po zainicjowaniu jQuery.

Ostatnią rzeczą do sprawdzenia jest upewnienie się, że nie ładujesz żadnych wtyczek przed załadowaniem jQuery. Wtyczki rozszerzają obiekt „$”, więc jeśli załadujesz wtyczkę przed załadowaniem rdzenia jQuery, otrzymasz błąd, który opisałeś.

Uwaga: Jeśli ładujesz kod, który nie wymaga do uruchomienia jQuery, nie trzeba go umieszczać w module obsługi jQuery. Ten kod można rozdzielić za pomocą document.readyState.


182
Jeśli chodzi o blok kodu, $(document)nie będzie działał, chyba że masz znacznik skryptu zawierający jQuery przed tym stwierdzeniem ...
PatrikAkerstrand,

3
Chciałbym dodać, że miałem ten sam problem co OP i mój problem polegał na tym, że używanie https z biblioteką jquery nie działa tak dobrze.
Mike Cheel,

20
(funkcja ($) {}) (jQuery);
JackMahoney 04.04.13

2
@Patrik: Zobacz moją odpowiedź na rozwiązanie wykorzystujące sekcję skryptów w widoku. W ten sposób jquery zostanie załadowane jako pierwsze, a $ jest poprawnie zdefiniowane.
angularsen

1
Sprawdź, czy masz również asynchronię w skrypcie, co spowodowało problem w moim przypadku.
Anders

207

Możliwe, że Twój skrypt został wywołany przed wywołaniem skryptu jquery.

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

To powoduje, że $ nie jest zdefiniowane

Umieść plik jquery.js przed tagiem skryptu, a on zadziała;) tak:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

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

1
To świetna odpowiedź. Próbowałem i działało dla mnie. Używam VS 2013 i ASP.net. Czy wiesz, jak mogę wczytać javascript, zanim strona załaduje się automatycznie w asp.net, czy muszę w ten sposób odwoływać się do javascript we wszystkich moich plikach?
Pat

Aby dodać do swojej odpowiedzi. W ASP.net możesz przejść do Shared_Layout.cshtml `<head> </head>`
Pat

@pat i pamiętaj o wpisaniu kodu w @section Scriptstagu
Marc

Zaktualizuj odpowiedź, aby używać HTTPS i rozważ użycie SPI devdocs.io/html/attributes#integrity-attribute
Josh Habdas

65

Najpierw upewnij się, że skrypt jQuery jest załadowany. Może to być z CDN lub lokalnie na twojej stronie. Jeśli nie załadujesz tego przed próbą użycia jQuery, powie ci, że jQuery nie jest zdefiniowane.

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

Może to być w HEAD lub w stopce strony, po prostu upewnij się, że go załadowałeś, zanim spróbujesz wywołać inne jQuery.

Następnie musisz użyć jednego z dwóch poniższych rozwiązań

(function($){
// your standard jquery code goes here with $ prefix
// best used inside a page with inline code, 
// or outside the document ready, enter code here
 })(jQuery); 

lub

jQuery(document).ready(function($){
// standard on load code goes here with $ prefix
// note: the $ is setup inside the anonymous function of the ready command
});

pamiętaj, że wiele razy $ (dokument) .ready (function () {// kod tutaj}); nie będzie działać.


1
„jQuery nie jest zdefiniowany”. Istnieje jednak po załadowaniu strony.
Paul Totzke

Nie jestem pewien, czy jest to pytanie czy stwierdzenie, ale sprawdziłbym, czy wywołujesz skrypt jQuery, zanim spróbujesz go użyć. To brzmi jak ładowanie go w stopce i wywoływanie rzeczy wyżej na stronie.
Andrew Killen

Przepraszam, myślałem, że to technika, w której można używać skryptów w dowolnej kolejności. Tak, użyłem tego w sekcji body w stylu MVC. mycode.js, a następnie jQuery.js to ostatnie 2 rzeczy na stronie.
Paul Totzke

Nie martw się, Paul, zredagowałem rozwiązanie, aby uwzględnić „musisz ... najpierw załadować”. :)
Andrew Killen

Czy to rozwiązuje problem „Moje skrypty są w odpowiedniej kolejności, ale skrypty są ładowane w innej kolejności”. Pamiętam, że robiłem coś takiego 4 lata temu, ale nie pamiętam, jaki problem rozwiązał.
Paul Totzke

50

Jeśli wywołanie wtyczki jQuery znajduje się obok </body>, a skrypt został wcześniej załadowany, należy uruchomić kod po window.onloadzdarzeniu, w następujący sposób:

window.onload = function() {
  //YOUR JQUERY CODE
}

`

więc Twój kod będzie działał dopiero po załadowaniu okna, gdy wszystkie zasoby zostaną załadowane. W tym momencie $zostanie zdefiniowana jQuery ( ).

Jeśli użyjesz tego:

$(document).ready(function () {
  //YOUR JQUERY CODE
});

`

$nie została jeszcze zdefiniowana w tej chwili, ponieważ jest wywoływana przed jQuery jest załadowany, a skrypt nie zadziała na tej pierwszej linii na konsoli.


Ogólnie zły pomysł na powiązanie z Window.unload. Będzie to skutecznie jedyne wydarzenie, które się odbędzie !!!
Rudi Strydom,

Uwaga: Pamiętaj, że możesz przypisać tylko jedną funkcję window.onload, jeśli przypiszesz do niej inną funkcję, poprzednie nie zostaną wykonane.
Bruno Peres,

28

Po prostu zrobiłem to samo i odkryłem, że mam dużo

type="text/javacsript"

Więc ładowali się, ale nie było już żadnej wskazówki, dlaczego to nie działa. Nie trzeba dodawać, że poprawna pisownia to naprawiła.


Uwaga moderatora : literówka w tym poście jest celowa , aby zilustrować pewien punkt. Nie edytuj wpisu, aby to „poprawić”.
Martijn Pieters

23

Użyj sekcji skryptów w widoku i układzie głównym.

Umieść wszystkie skrypty zdefiniowane w widoku w sekcji Skrypty widoku. W ten sposób możesz załadować układ główny po załadowaniu wszystkich innych skryptów. Jest to domyślna konfiguracja podczas uruchamiania nowego projektu internetowego MVC5. Nie jestem pewien co do wcześniejszych wersji.

Views / Foo / MyView.cshtml:

// The rest of your view code above here.

@section Scripts 
{ 
    // Either render the bundle defined with same name in BundleConfig.cs...
    @Scripts.Render("~/bundles/myCustomBundle")

    // ...or hard code the HTML.
    <script src="URL-TO-CUSTOM-JS-FILE"></script>

    <script type="text/javascript">
      $(document).ready(function () {

        // Do your custom javascript for this view here. Will be run after 
        // loading all the other scripts.            
      });
    </script>
}

Widoki / Udostępnione / _Layout.cshtml

<html>
<body>
    <!-- ... Rest of your layout file here ... -->

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Zwróć uwagę, jak sekcja skryptów jest renderowana jako ostatnia w głównym pliku układu.


2
Uwaga: Sekcje widoku nie są obsługiwane w widokach częściowych według projektu.
Adam Naylor

To właśnie musiałem zrobić dla mojej poprawki ... i powinienem był wiedzieć, że przede wszystkim powinien używać skryptów @Script, ale zapomniałem o tym, dopóki nie szukałem poprawki.
Caverman,

12

upewnij się, że naprawdę ładujesz jquery, to nie jest jquery - to interfejs użytkownika!

  <script language="JavaScript" 
    src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js">
  </script>

To jest poprawne źródło skryptu dla jquery:

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

11

Jak wspomniano powyżej, dzieje się tak z powodu konfliktu zmiennej $.

Rozwiązałem ten problem, rezerwując zmienną dodatkową dla jQuery bez konfliktu.

var $j = jQuery.noConflict();

a następnie użyj go w dowolnym miejscu

$j( "div" ).hide();

więcej szczegółów można znaleźć tutaj


8

Oznacza to, że twoja biblioteka jQuery nie została jeszcze załadowana.

Możesz przenieść swój kod po wyciągnięciu biblioteki jQuery.

lub możesz użyć czegoś takiego

window.onload = function(){
  // Your code here
};  

Uruchamia się po załadowaniu DOM, ale nie po załadowaniu formantów, javascript i innych programów działających w tle. Aby to zadziałało, należy zastosować opóźnienie czasowe.
Fandango68,


5

po kilku testach znalazłem szybkie rozwiązanie, możesz dodać na górze strony indeksu:

<script>
$=jQuery;
</script>

działa bardzo dobrze :)


4
pytanie brzmiało: $ nie jest zdefiniowane, nie?
Mimouni,

Nieprzechwycony błąd: jQuery nie jest zdefiniowany
Simon Schnell,

Czy umieściłeś go bezpośrednio pod importem biblioteki jQuery?
Mike Warren

4

Otrzymałem ten sam komunikat o błędzie, gdy źle napisałem odwołanie do jQuery i zamiast type="text/javascript"wpisałem „... javascirpt”. ;)


Eureka! Miałem mój jak type="text/css". Dzięki za uratowanie mojego zdrowia psychicznego!
Jeriko

Wygłupiałem się i miałem type="javascript". Zmarnowałem 30 minut na znalezienie.
mason

4

Wygląda na to, że jQuery nie ładuje się poprawnie. Z jakiego źródła / wersji korzystasz?

Alternatywnie może to być kolizja przestrzeni nazw, więc spróbuj użyć jQuery jawnie zamiast używać $. Jeśli to zadziała, możesz chcieć użyć tego, noConflictaby upewnić się, że inny używany kod się $nie psuje.


3

Ten błąd oznacza, że ​​jQuery nie został jeszcze załadowany na stronie. Za pomocą$(document).ready(...) lub jakikolwiek jego wariant nie przyniesie nic dobrego, podobnie jak $funkcja jQuery.

Korzystanie window.onloadpowinno tu działać. Pamiętaj, że tylko jednej funkcji można przypisać window.onload. Aby uniknąć utraty oryginalnej logiki obciążenia, możesz ozdobić oryginalną funkcję w następujący sposób:

originalOnload = window.onload;
window.onload = function() {
  if (originalOnload) {
    originalOnload();
  }
  // YOUR JQUERY
};

Spowoduje to wykonanie funkcji, która została pierwotnie przypisana window.onload , a następnie zostanie wykonana // YOUR JQUERY.

Zobacz https://en.wikipedia.org/wiki/Decorator_pattern, aby uzyskać więcej informacji na temat wzoru dekoratora.


2

Korzystam z Url.Content i nigdy nie mam problemu.

<script src="<%= Url.Content ("~/Scripts/jquery-1.4.1.min.js") %>" type="text/javascript"></script>

2

W rozwiązaniu wspomniano - „Ostatnią rzeczą do sprawdzenia jest upewnienie się, że nie ładujesz żadnych wtyczek przed załadowaniem jQuery. Wtyczki rozszerzają obiekt„ $ ”, więc jeśli ładujesz wtyczkę przed załadowaniem rdzenia jQuery, to Dostaniesz opisany błąd. ”

Aby tego uniknąć -

Wiele bibliotek JavaScript używa $ jako funkcji lub nazwy zmiennej, podobnie jak jQuery. W przypadku jQuery $ jest tylko aliasem dla jQuery, więc cała funkcjonalność jest dostępna bez użycia $. Jeśli musimy użyć innej biblioteki JavaScript obok jQuery, możemy zwrócić kontrolę $ z powrotem do innej biblioteki za pomocą wywołania $ .noConflict ():


1

Miałem ten problem raz bez wyraźnego powodu. Działo się to lokalnie, gdy pracowałem przez serwer programistyczny aspnet. Działało, a ja przywróciłem wszystko do stanu, w którym wcześniej działało, a mimo to nie działało. Zajrzałem do debuggera Chrome i plik jquery-1.7.1.min.js załadował się bez żadnych problemów. To wszystko było bardzo mylące. Nadal nie wiem, na czym polegał problem, ale zamknięcie przeglądarki, zamknięcie serwera programistycznego, a następnie próba jego rozwiązania.


1

Wystarczy umieścić adres jquery na górze kodu jquery

lubię to--

<script src="<%=ResolveUrl("~/Scripts/jquery-1.3.2.js")%>" type="text/javascript"></script>

<script type="text/javascript">
    $(function() {
        $('#post').click(function() {
            alert("test"); 
        });
    });
</script>

1

Miałem ten sam problem, a to dlatego, że moje odwołanie do pliku jQuery.js nie było w tagu. Gdy to zmieniłem, wszystko zaczęło działać.

Anthony


1
  1. Sprawdź, czy zawiera dokładną ścieżkę do pliku jquery.

    <script src="assets/plugins/jquery/jquery.min.js"></script>

jeśli dodasz to na dole strony, proszę wszystkich wywołać funkcję JS poniżej tej deklaracji.

  1. Sprawdź za pomocą tego testu kodu,

    <script type="text/javascript">
    /***
     * Created by dadenew
     * Submit email subscription using ajax
     * Send email address
     * Send controller
     * Recive response
     */
    $(document).ready(function() { //you can replace $ with Jquery
    
      alert( 'jquery working~!' );
    });

Pokój!


0

Mamy ten sam problem .... ale przypadkowo sprawdziłem właściwości folderu i ustawiłem coś ...

Musisz sprawdzić właściwości każdego folderu, do którego masz dostęp.

  1. folder prawym przyciskiem myszy
  2. karta „uprawnienia”
  3. ustaw dostęp do folderu: WŁAŚCICIEL: tworzenie i usuwanie plików GRUPA: dostęp do plików INNE: dostęp do plików

Mam nadzieję, że to jest rozwiązanie ......


0

Jeśli używasz jQuery w asp.net, jeśli używasz strony wzorcowej i ładujesz tam plik źródłowy jquery, upewnij się, że masz nagłówek contentplace placeholder po wszystkich odwołaniach do skryptu jquery.

Miałem problem polegający na tym, że wszystkie strony, które korzystały z tej strony wzorcowej, zwróciłyby „$ nie jest zdefiniowany” po prostu dlatego, że niepoprawna kolejność powodowała uruchomienie kodu po stronie klienta przed utworzeniem obiektu jquery. Upewnij się więc, że masz:

<head runat="server">
    <script type="text/javascript" src="Scripts/jquery-VERSION#.js"></script>
    <asp:ContentPlaceHolder id="Header" runat="server"></asp:ContentPlaceHolder>
</head>

W ten sposób kod będzie działał w kolejności i będziesz mógł uruchamiać kod jQuery na stronach potomnych.


0

W moim przypadku wskazywałem na JQuery hostowany przez Google. Zostało poprawnie dołączone, ale byłem na stronie HTTPS i dzwoniłem przez HTTP. Gdy naprawiłem problem (lub zezwoliłem na niebezpieczną zawartość), od razu się uruchomił.


0

Miałem ten sam problem i nie mogłem zrozumieć, co go spowodowało. Niedawno przekonwertowałem moje pliki HTML z japońskiego na UTF-8, ale nie zrobiłem nic z plikami skryptowymi. Jakoś plik jquery-1.10.2.min.js został uszkodzony w tym procesie (wciąż nie mam pojęcia jak). Naprawiono go, zastępując plik jquery-1.10.2.min.js oryginałem.


0

wygląda na to, że jeśli zlokalizujesz swoje pliki jquery.js w tym samym folderze lub w niektórych podfolderach, w których znajduje się plik HTML, problem Firebug zostanie rozwiązany. np. jeśli twój html znajduje się pod C: / folder1 /, to twoje pliki js powinny być gdzieś pod C: / folder1 / (lub C: / folder1 / folder2 itd.), a także odpowiednio zaadresowane w dokumencie html. mam nadzieję że to pomoże.


0

Mam ten sam problem i żaden przypadek nie rozwiązuje mnie. Jedyną rzeczą, która działa dla mnie, jest umieszczona w pliku Site.master, następna:

<script src="<%= ResolveUrl("~/Scripts/jquery-1.7.1.min.js") %>" type="text/javascript"></script>
<script src="<%= ResolveUrl("~/Scripts/bootstrap/js/bootstrap.min.js") %>" type="text/javascript"></script>

Przy src = "<% = ResolveUrl (" ") ... ładowanie jQuery na stronach z treścią jest prawidłowe.


0

Miałem bardzo podobny problem. W mojej aplikacji C # MVC JQuery nie został rozpoznany. Musiałem przenieść @ Scripts.Render („~ / bundles / jquery”) z dolnej części mojego pliku _Layout.cshtml do nagłówka sekcji. Upewnij się także, że kupiłeś Jquery jako pakiet Nuget, jeśli korzystasz ze studia wizualnego!

<head>
    @Scripts.Render("~/bundles/jquery")
</head>

0

Istnieje sposób, aby automatycznie ładował javascript przed uruchomieniem reszty kodu.

Przejdź do Views \ Shared_Layout.html i dodaj następujące

<head>
  <*@ Omitted code*@>
  <script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
</head>

0

jeśli scripttag ma deferatrybut, pokazuje błąd

Uncaught ReferenceError: $ nie jest zdefiniowany

i musi usunąć atrybut deferz scripttagu


0

Jest to powszechny problem, aby rozwiązać ten problem, musisz sprawdzić jakiś punkt

  1. Dołącz główną bibliotekę jquery
  2. Sprawdź problem z przeglądarką
  3. Dodaj bibliotekę na GÓRZE kodu jquery
  4. Sprawdź, czy sieci CDN mogą być zablokowane.

Szczegółowe informacje znajdują się w tym blogu kliknij tutaj

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.