ReferenceError Uncaught: $ tidak didefinisikan?

658

Kenapa kode ini melempar

ReferenceError Uncaught: $ tidak didefinisikan

kapan itu baik-baik saja sebelumnya?

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

Hasil dalam tab tidak ditutup lagi.

jQuery direferensikan di header:

<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>
Olivers
sumber
<script language = "JavaScript" type = "text / javascript" src = "<? php echo get_option ('siteurl')?> / js / jquery-1.2.6.min.js"> </script> Ikuti ini top
captainsac
Dalam kasus saya, JQuery ada di bagian footer, jadi fungsi JS dipanggil terlebih dahulu.
Daniel Beltrami
Apakah ini menjawab pertanyaan Anda? ReferenceError: $ tidak didefinisikan
Brynn

Jawaban:

689

Anda harus menempatkan referensi ke skrip jquery terlebih dahulu.

<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>
Jeremy
sumber
27
Hanya untuk memastikan ini jelas: Anda tidak dapat menempatkan referensi skrip ke jquery-ui sebelum skrip jquery itu sendiri. Itulah yang memperbaiki masalah bagi saya: pertama jquery-xxxmin.js, kemudian jquery-ui-xxxxxx.js.
Wagner da Silva
26
2 tahun kemudian, tetap saja jawabannya tidak "dicentang") Artikel ini menjelaskan yang satu ini dan 4 kasus yang lebih umum ketika kesalahan ini terjadi.
Uzbekjon
2
@ Uzbekjon Itu menyelesaikannya untuk saya. Jalur ke skrip salah di salah satuHTML file saya .
Adam Jensen
@ Jeremy, terima kasih banyak. Juga taruh sebelum tampilan parsial (mvc) sehingga tersedia untuk skrip apa pun di parsial.
Andrew Day
1
@ Uzbekjon hampir 10 tahun sekarang dan masih belum dicentang. Terima kasih telah menyediakan tautan artikel.
Modo
235

Anda memanggil fungsi siap sebelum JavaScript jQuery disertakan. Referensi jQuery pertama.

Sumber Terbuka
sumber
30
@RamSharma Sebenarnya, ini adalah jawaban yang tepat. Anda tidak perlu hal lain untuk menyelesaikan masalah ini.
Derek 朕 會 功夫
Ya. Ini masalah saya. Cukup minta jquery SETELAH mereferensikan file js saya. Doh!
dogonaro
Dalam kasus saya, saya harus menghapus penangguhan kunci dari <script src = "/ js / jquery-1.2.6.min.js" defer> </script>
Charden Daxicen
123

Inilah yang memecahkannya untuk saya. Awalnya saya pergi ke Google dan menyalin dan menempelkan cuplikan saran mereka untuk jQuery di halaman CDN mereka:

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

Cuplikan tidak menyertakan HTTP:atau HTTPS:dalam srcatribut tetapi peramban saya, FireFox, memerlukannya sehingga saya mengubahnya menjadi: edit: ini juga berfungsi untuk saya dengan Google Chrome

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

Lalu berhasil.

Marlin Mixon
sumber
13
Sebenarnya, cuplikan / contoh Google sudah benar - atribut src mereka adalah URL yang kurang protokol yang berarti browser harus menggunakan protokol (HTTP / HTTPS) dari halaman panggilan. Lihat paulirish.com/2010/the-protocol-relative-url . Ini adalah praktik terbaik untuk menghindari peringatan konten campuran jika halaman Anda pernah dilayani melalui SSL dan skrip tidak.
pwdst
12
Satu masalah umum di sini, kemungkinan, adalah ketika URL relatif protokol digunakan selama pengembangan, dan pada hari yang cerah Anda mencoba memuat halaman dari file lokal. Peramban Anda akan mencoba memuat secara optimis file://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.jsdan Anda heran mengapa itu tidak muncul di konsol jaringan.
Pieter Ennes
terima kasih @PieterEnnes, ini persis seperti yang terjadi pada saya. Terima kasih kepada penjawabnya juga!
jwg
43

Jika skrip khusus Anda dimuat sebelum plugin jQuery dimuat ke browser, maka masalah jenis ini dapat terjadi. Jadi, selalu simpan kode JavaScript atau jQuery Anda sendiri setelah memanggil plugin jQuery sehingga solusinya adalah:

Pertama tambahkan tautan ke file jQuery yang dihosting di GoogleApis atau file jQuery lokal yang akan Anda unduh dari http://jquery.com/download/ dan host di server Anda:

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

atau plugin apa pun untuk jQuery. Kemudian masukkan tautan atau kode file skrip khusus Anda:

<script src="js/custom.js" type="text/javascript"></script>
Jnanaranjan
sumber
3
If your custom script is loaded before the jQuery plugin is loaded to the browser then this type of problem may occur jawaban sempurna .. dalam skrip kasus saya ada di footer
echoashu
41

Dalam kasus saya, saya meletakkan .jsfile sebelum tautan skrip jQuery, meletakkan .jsfile setelah tautan skrip jQuery menyelesaikan masalah saya.

<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>
shivam
sumber
Hanya menggunakan ini untuk memperbaiki jschart saya.
indofraiser
memperbaiki masalah ini, .js file tersebut harus diletakkan sebelum tautan skrip jQuery.
Metode Ilmiah
27

Oke, masalah saya berbeda - itu adalah model Keamanan Dokumen di Chrome .

Melihat jawaban di sini, jelas bahwa saya entah bagaimana tidak memuat file jquery saya sebelum memanggil $(document).ready()fungsi dll. Namun, mereka semua berada di posisi yang benar.

Dalam kasus saya, ini adalah karena saya mengakses konten melalui koneksi HTTPS yang aman, sedangkan halaman tersebut mencoba mengunduh data yang di-host CDN dari google, dll. Solusinya adalah menyimpannya secara lokal dan kemudian memasukkan kemudian secara langsung daripada dari CDN setiap waktu.

Sunting : Cara lain untuk melakukan ini adalah dengan menautkan ke semua hal yang diinangi CDN sebagai https: // daripada http: // - maka model tidak mengeluh.

Sudipta Chatterjee
sumber
5
Juga, perhatikan bahwa Anda dapat meninggalkan tautan protokol dan itu akan memilih yang sesuai tergantung pada konteksnya (dengan asumsi ada versi http dan https). Lihat stackoverflow.com/a/3622615/4332
Adrian Mouat
ya. yang ini menyelesaikan masalah saya, saya memuat skrip dari Url seperti ini ´ // cdnjs.cloudflare.com / ajax / libs / jquery / 1.12.0 / jquery.min.js´. Menggunakan ´ cdnjs ... ´ berfungsi dengan baik
user9869932
25

Tambahkan perpustakaan sebelum Anda memulai skrip. Anda dapat menambahkan salah satu dari CDN berikut ini untuk memulainya.

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

Jika Anda ingin versi cdn Jquery lainnya periksa tautan ini .

Setelah ini:

<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>
lalithkumar
sumber
19

Jika di wordpress, mungkin perlu diubah

$(document).ready(function() {

untuk

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

atau tambahkan

var $ = jQuery;

sebelum

$(document).ready(function() {
xoxn-- 1'w3k4n
sumber
19

Saya memiliki masalah yang sama persis dan tidak ada solusi di atas yang membantu. Namun, saya hanya menautkan .cssfile setelah .jsfile dan masalah secara ajaib menghilang. Semoga ini membantu.

berkerumun
sumber
13
Pertama, untuk kinerja rendering halaman yang lebih baik, Anda harus selalu menautkan file CSS sebelum file JS. Kedua, urutan file css dan js seharusnya tidak berpengaruh dalam penghentian saat ini.
Uzbekjon
12
"Apa yang memperbaiki masalah Anda seharusnya tidak memperbaiki masalah Anda dan Anda seharusnya tidak melakukan apa yang memperbaiki masalah Anda."
Andrew
15

Saya ingin mencoba membuat skrip saya asinkron . Kemudian saya lupa tentang hal itu dan ketika saya menjalankan file .js [custom] hanya memuat 50% dari waktu sebelum jQuery.js.

Jadi saya berubah

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

untuk

<script src="js/script.js"></script>
Sindri Þór
sumber
14

Dalam kasus saya, saya memiliki referenceError ini karena urutan panggilan skrip salah. Memecahkannya dengan mengubah urutan:

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

untuk

<script src="js/jquery-1.10.2.js"></script>
<script src="js/index.js"></script>
Yannis Dran
sumber
1
Sebagian besar ini adalah masalah yang saya juga temukan ketika kesalahan referensi terjadi untuk '$'
Dipak
9

Saya memiliki masalah yang sama, dan saya menyelesaikannya dengan meletakkan jQuery di bagian atas semua kode javascript yang saya miliki dalam kode saya.

Sesuatu seperti ini:

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

Semoga bisa membantu seseorang di masa depan.

Orang Mati
sumber
8

Anda memanggil ready()fungsi sebelum JavaScript jQuery disertakan. Referensi jQuery pertama.

Jika Anda menggunakan ASP.NET MVC, Anda dapat menentukan kapan kode JS Anda harus dirender, dengan melakukan ini:

1, Dalam page.cshtmlmembungkus <script>tag Anda menjadi bagian, dan berikan nama, nama yang umum digunakan adalah 'skrip':

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

2, Di _Layout.cshtmlhalaman Anda tambahkan @RenderSection("Scripts", required: false), pastikan untuk memasukkannya setelah Anda mereferensikan sumber Jquery, ini akan membuat kode JS Anda render lebih lambat dari Jquery.

Mayer Spitzer
sumber
6

Jika Anda melakukan ini di .Net dan memiliki file skrip direferensikan dengan benar dan Anda jQuery terlihat baik, pastikan bahwa pengguna Anda memiliki akses ke file skrip. Proyek yang saya kerjakan (seorang rekan kerja) memiliki web.config mereka yang menolak akses ke pengguna anonim. Halaman yang sedang saya kerjakan dapat diakses oleh pengguna anonim sehingga mereka tidak memiliki akses ke file skrip. Menjatuhkan yang berikut ke web.config dan semuanya benar di dunia:

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

Dalam kasus saya itu salah ketik, saya lupa backslash dan salah referensi sumber.

Sebelum src="/scripts/jquery.js"

Setelah    src="scripts/jquery.js"

Dennis
sumber
5

File sumber jquery-1.2.6.min.jstidak disebut perintah jQuery $()dijalankan lebih awal dari <..src='jquery-1.2.6.min.js'>.

Silakan jalankan <.. src="/js/jquery-1.2.6.min.js..">terlebih dahulu dan pastikan jalur src benar, kemudian jalankan perintah jquery

$(document).ready(function() 
charles hsu
sumber
5

Ini terjadi pada saya sebelumnya.

Alasannya adalah bahwa saya menghubungkan Android ke tampilan web dengan JS. Dan saya mengirim parameter tanpa tanda kutip.

js.sayHello(hello);

dan ketika saya mengubahnya menjadi

js.sayHello('hello');

itu berhasil.

Reinherd
sumber
Saya tidak tahu apa arti parameter tanpa tanda kutip ... sepertinya Anda memiliki kesalahan referensi.
Aluan Haddad
Saya punya masalah di Freemarker dan alasannya adalah tidak adanya tanda kutip tunggal, jadi nilainya diperlakukan bukan seperti string, tetapi sebagai variabel
torina
4

File JavaScript Anda tidak ada sehingga kesalahan ini terjadi. Cukup tambahkan file JavaScript di dalam <head>tag. Lihat contohnya:

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

atau tambahkan kode berikut dalam tag:

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

Kesalahan akan terjadi dalam dua skenario berikut juga.

  1. Elemen skrip @section tidak ada dari file HTML
  2. Kesalahan dalam mengakses elemen DOM. Misalnya mengakses elemen DOM disebut sebagai $ ("js-toggle") alih-alih $ (". Js-toggle"). Sebenarnya masa itu hilang

Jadi 3 hal yang harus diikuti - periksa skrip yang diperlukan ditambahkan, periksa apakah itu ditambahkan dalam urutan yang diperlukan dan kesalahan sintaks ketiga di Java Script Anda.

Sankar Krishnamoorthy
sumber
Ya. dan untuk atribut id $ ('# someDiv')
cagcak
3

Doh! Saya memiliki tanda kutip campuran dalam tag saya yang menyebabkan referensi jquery rusak. Melakukan inspeksi di Chrome memungkinkan saya untuk melihat bahwa file tersebut tidak ditautkan dengan benar.

justreed
sumber
3

Dalam kasus saya, saya lupa memasukkan ini:

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

Sebelumnya saya hanya memasukkan jquery-mobile yang menyebabkan kesalahan ini.

Anand
sumber
3

Saya memodifikasi tag skrip untuk menunjuk ke konten yang tepat dan mengubah urutan skrip menjadi yang tepat di editor. Tapi benar-benar lupa menyimpan perubahan.

Hexodus
sumber
2

Saya memiliki masalah yang sama dan itu karena saya kehilangan> penutup pada link style sheet.

jason
sumber
2
<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>

Saya memiliki masalah yang sama, dan Anda tahu, itu karena jaringan terputus ketika saya menguji di perangkat android tampilan web dan saya tidak menyadarinya, dan lokal tidak ada masalah untuk memuat karena tidak memerlukan jaringan. Tampaknya konyol tapi itu menyia-nyiakan ~ 1 jam saya untuk mengetahuinya.

Buah
sumber
2

Anda belum mereferensikan perpustakaan jQuery.

Anda harus menyertakan baris yang mirip dengan ini di HTML Anda:

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

Saya memiliki masalah serupa. Server pengujian saya berfungsi baik dengan "http". Namun gagal dalam produksi yang memiliki SSL.

Jadi dalam produksi, saya menambahkan "HTPPS" bukan "HTTP" dan dalam pengujian, saya tetap seperti itu "HTTP".

Uji:

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

Produksi:

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

Semoga ini bisa membantu seseorang yang sedang mengerjakan wordpress.

pengguna3671115
sumber
1

Cukup aneh, masalah saya berasal dari PHP.

Panggilan REST API gagal, dan itu melanggar pemuatan perpustakaan setelahnya. Karena kegagalan berasal dari panggilan REST, itu tidak memberi saya kesalahan kompilasi php.

Simpan ini sebagai opsi juga, jika memuat jquery tampaknya ok.

Aris
sumber
1

Saya mengalami masalah ini, ketika saya menjelajahi internet melalui hotspot seluler saya. itu juga mengompresi gambar dan menambahkan skrip berikut di bagian bawah tag tubuh

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

Ketika saya terhubung ke koneksi wifi yang tepat, semua sepertinya berfungsi untuk saya. Semoga ini bisa membantu seseorang.

bubb
sumber
1

Ini juga bisa terjadi, jika ada masalah jaringan. Yang berarti, bahwa meskipun "skrip jquery" sudah ada, dan dimasukkan sebelum penggunaan, karena skrip jquery tidak dapat diakses, pada saat memuat halaman, maka definisi ke "$" diperlakukan sebagai "referensi tidak terdefinisi".

UNTUK TUJUAN / TUJUAN DEBUG :: Anda dapat mencoba mengakses url "jquery-script" di browser. Jika itu dapat diakses, halaman Anda, harus memuat dengan benar, jika tidak maka akan ditampilkan kesalahan yang dikatakan (atau kesalahan terkait skrip lainnya). Contoh - http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js harus dapat diakses, di browser (atau posisi konteks browser).

Saya memiliki masalah yang sama, di mana saya dapat memuat halaman html (menggunakan skrip) di windows-host-browser saya, tetapi tidak dapat memuat di vm-ubuntu. Memecahkan masalah jaringan, menyelesaikan masalah.

parasrish
sumber
0
var $ = jQuery;
jQuery(document).ready(function($){
Jayanit Satani
sumber
1
Ini sama sekali bukan jawaban. Anda harus menambahkan beberapa penjelasan.
jmlemetayer
Ini adalah solusi karena WordpressAnda harus menyebutkan itu.
Hexodus
Kamu menyelamatkan hariku. Sedang berjuang untuk melakukannya di WordPress dan tidak ada tetapi solusi ini bekerja seperti pesona.
rahimv