TypeError: $ nie jest funkcją podczas wywoływania funkcji jQuery


214

Mam prosty skrypt jQuery we wtyczce WordPress, który używa otoki jQuery:

$(document).ready(function(){

    // jQuery code is in here

});

Wywołuję ten skrypt z poziomu pulpitu WordPress i ładuję go PO załadowaniu środowiska jQuery.

Kiedy sprawdzam stronę w Firebug, ciągle otrzymuję komunikat o błędzie:

TypeError: $ nie jest funkcją

$ (dokument) .ready (function () {

Czy powinienem zawinąć skrypt w tę funkcję:

(function($){

    // jQuery code is in here

})(jQuery);

Ten błąd miałem już kilka razy i nie jestem pewien, jak sobie z tym poradzić.

Każda pomoc byłaby bardzo mile widziana.


3
Jeśli wpiszesz $w konsoli i naciśniesz enter - co widzisz?
zerkms

Gdy uruchamiam $ w konsoli, otrzymuję „niezdefiniowany”
Jason

Odpowiedzi:


320

Domyślnie podczas kolejkowania jQuery w Wordpress należy używać jQueryi $nie jest on używany (służy to kompatybilności z innymi bibliotekami).

Twoje rozwiązanie w pakowanie functionbędzie działało dobrze, lub możesz załadować jQuery w inny sposób (ale prawdopodobnie nie jest to dobry pomysł w Wordpress).

Jeśli musisz użyć document.ready, możesz przejść $do wywołania funkcji:

jQuery(function ($) { ...

Próbowałem drugiej wersji, jednak nie działała, pierwsza wersja działała, ale chcę się tylko upewnić, że nie podwoję dzwonienia do jQuery.
Jason

@Jason, nawet tego nie potrzebujesz; dokładnie to, co napisałem: jsfiddle.net/vcbYJ
Pills Explosion

Czy możesz zobaczyć to pytanie wordpress.stackexchange.com/questions/214858/…

A jeśli jakikolwiek selektor znajduje się na zewnątrz jQuery(function ($) { ..., musisz użyć jQueryzamiast$
Misha Rudrastyh

Dzięki stary. Doceń to
Desper

154

To powinno to naprawić:

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

Krótko mówiąc, WordPress uruchamia własne skrypty, zanim będzie to możliwe, i wypuszczają $var, aby nie kolidował z innymi bibliotekami. Ma to całkowity sens, ponieważ WordPress jest używany do wszelkiego rodzaju stron internetowych, aplikacji i oczywiście blogów.

Z ich dokumentacji:

Biblioteka jQuery zawarta w WordPress jest ustawiona na tryb noConflict () (patrz wp-zawiera / js / jquery / jquery.js). Ma to zapobiec problemom ze zgodnością z innymi bibliotekami JavaScript, które WordPress może połączyć.

W trybie noConflict () globalny skrót $ dla jQuery jest niedostępny ...


28

To rozwiązanie działało dla mnie

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

Przenieś swój kod do zamknięcia i użyj $zamiastjQuery

Znalazłem powyższe rozwiązanie w /magento/33348/uncaught-typeerror-undefined-is-not-a-function-when-using-a-jquery-plugin-in-ma

... po przeszukaniu zbyt wiele


2
Fantastyczne rozwiązanie. Głównym powodem tego jest to, że „;” zamyka każdą inną aktywną jquery, która jest już aktywna, i jednocześnie deklaruje lokalnie nową. Jeśli masz tylko kilka sekund na wdrożenie układu w produkcji lub wiele uruchomionych wtyczek Wordpress, możesz to zrobić świetnie. Ale pamiętaj, że musisz rozwiązać problem, to tylko pomoc zespołu, ale jeśli jest to strona informacyjna, jest OK.
luis,

@Martha James To działa dla mnie, więc ją zawarłem. To może, ale nie musi działać dla innych
Bikram Shrestha

19

Możesz uniknąć takich konfliktów

var jq=jQuery.noConflict();
jq(document).ready(function(){  
  alert("Hi this will not conflict now");
  jq('selector').show();
});

7
Lub $ = jQuery.noConflict ();
Cyssoo,


13

Spróbuj tego:

<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

Musisz przekazać $ w funkcji ()

<script>
jQuery(document).ready(function($){

// jQuery code is in here

});
</script>

3
Czym różni się to od odpowiedzi podanej powyżej (sprzed trzech lat)?
rnevius

8

zamień $znak na jQuery następujący:

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

7

Dokładnie sprawdź referencje jQuery. Możliwe, że odwołujesz się do niego więcej niż raz lub wywołujesz funkcję zbyt wcześnie (przed zdefiniowaniem jQuery). Możesz spróbować, jak wspomniano w moich komentarzach i umieścić dowolne odwołanie do jQuery na górze pliku (w głowie) i sprawdzić, czy to pomoże.

Jeśli użyjesz enkapsulacji jQuery, to nie powinno pomóc w tym przypadku. Spróbuj, ponieważ uważam, że jest ładniejszy i bardziej oczywisty, ale jeśli jQuery nie zostanie zdefiniowany, otrzymasz te same błędy.

W końcu ... jQuery nie jest obecnie zdefiniowane.


Myślę, że raczej niż coś próbuje uzyskać dostęp do JQuery, zanim zostanie zdefiniowane, co z kolei wszystko psuje. Spróbuj przenieść swoje scriptodniesienia JQueryna górę, index.htmla prawdopodobnie zadziała
Dan Moldovan

Ta odpowiedź wymaga większej widoczności. Tak, pozostałe są poprawne, jeśli standardowa przestrzeń nazw jest pobierana z wersją jQuery załadowaną przez inną wtyczkę. Ale sprawdź, czy nie ładujesz jQuery nieumyślnie (i być może niepotrzebnie) więcej niż jeden raz.
edkay,


5

Posługiwać się

jQuery(document).

zamiast

$(document).

lub

W ramach funkcji $ wskazuje na jQuery, jak można się spodziewać

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

4

Co dla mnie zadziałało Pierwszą biblioteką do zaimportowania jest biblioteka zapytań, a następnie wywołuje metodę jQuery.noConflict ().

<head>
 <script type="text/javascript" src="jquery.min.js"/>
 <script>
  var jq = jQuery.noConflict();
  jq(document).ready(function(){
  //.... your code here
    });
 </script>


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

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

teraz użyj jq zamiast jQuery


3

Ten problem występuje, gdy nazwa funkcji i nazwa identyfikatora w pliku są takie same. upewnij się tylko, że wszystkie twoje identyfikatory w pliku są unikalne.


2

Możesz użyć

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

lub

(function ($) { ... }(jQuery));
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.