Uncaught ReferenceError: $ не определено?

658

Как получается, что этот код

Uncaught ReferenceError: $ не определено

когда все было хорошо раньше?

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

Результаты во вкладках больше не закрываются.

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>
Olivers
источник
<script language = "JavaScript" type = "text / javascript" src = "<? php echo get_option ('siteurl')?> / js / jquery-1.2.6.min.js"> </ script> Включите это top
captainsac
В моем случае JQuery был в нижнем колонтитуле, поэтому сначала вызывали функцию JS.
Даниэль Бельтрами
Отвечает ли это на ваш вопрос? ReferenceError: $ не определено
Бринн

Ответы:

689

Сначала вы должны поместить ссылки на скрипты 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>
Джереми
источник
27
Просто чтобы убедиться, что это ясно: вы не можете поместить ссылку на скрипт в jquery-ui перед самим скриптом jquery. Вот что мне помогло: сначала jquery-xxxmin.js, затем jquery-ui-xxxxxx.js.
Вагнер да Силва
26
Спустя 2 года ответ все еще не отмечен галочкой). В этой статье описываются один и еще четыре наиболее распространенных случая, когда возникает эта ошибка.
Узбекджон
2
@Uzbekjon Это решило это для меня. Путь к сценарию был неверным в одном из моих HTMLфайлов.
Адам Дженсен
@ Джереми, спасибо большое. Также поместите его перед любым частичным представлением (mvc), чтобы он был доступен для любого сценария в частичном.
Эндрю Дэй
1
@Uzbekjon уже почти 10 лет, и он до сих пор не отмечен. Спасибо за предоставление ссылки на статью.
Модо
235

Вы вызываете функцию готовности перед включением jQuery JavaScript. Ссылка JQuery в первую очередь.

Открытый исходный код
источник
30
@RamSharma На самом деле, это правильный ответ. Вам не нужно больше ничего, чтобы решить проблему.
Дерек 朕 會 功夫
Ага. Это была моя проблема. Просто имел jquery ПОСЛЕ ссылки на мой файл JS. D'о!
dogonaroof
В моем случае мне пришлось удалить ключ defer из <script src = "/ js / jquery-1.2.6.min.js" defer> </ script>
Charden Daxicen
123

Это то, что решило это для меня. Первоначально я пошел в Google, скопировал и вставил предложенный им фрагмент кода для jQuery на их странице CDN:

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

Фрагмент не содержит атрибут HTTP:или HTTPS:в srcатрибуте, но мой браузер, FireFox, нуждался в нем, поэтому я изменил его на: edit: это работало и для меня с Google Chrome

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

Тогда это сработало.

Марлин Миксон
источник
13
Строго говоря, фрагмент / пример Google верен - их атрибут src является URL-адресом без протокола, что означает, что браузер должен использовать протокол (HTTP / HTTPS) вызывающей страницы. Смотрите paulirish.com/2010/the-protocol-relative-url . Рекомендуется избегать предупреждений о смешанном содержании, если ваша страница обслуживается по протоколу SSL, а сценарии - нет.
'11
12
Вероятно, одна из распространенных проблем заключается в том, что относящиеся к протоколу URL-адреса используются во время разработки, а в солнечный день вы пытаетесь загрузить страницу из локального файла. Ваш браузер будет оптимистично пытаться загрузить, file://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.jsи вы удивляетесь, почему он не отображается в сетевой консоли.
Питер Эннес
спасибо @PieterEnnes, это был именно тот случай для меня. Спасибо ответчику тоже!
JWG
43

Если ваш пользовательский скрипт загружается до того, как плагин jQuery загружается в браузер, тогда может возникнуть такая проблема. Поэтому всегда сохраняйте свой собственный код JavaScript или jQuery после вызова плагина jQuery, поэтому решение для этого:

Сначала добавьте ссылку на файл jQuery, размещенный на GoogleApis, или локальный файл jQuery, который вы скачаете с http://jquery.com/download/, и разместите на своем сервере:

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

или любой плагин для JQuery. Затем поместите ссылку на свой файл сценария или код:

<script src="js/custom.js" type="text/javascript"></script>
Jnanaranjan
источник
3
If your custom script is loaded before the jQuery plugin is loaded to the browser then this type of problem may occur идеальный ответ .. в моем случае сценарий был в нижнем колонтитуле
echoashu
41

В моем случае я помещал свой .jsфайл перед ссылкой на скрипт jQuery, а .jsфайл после ссылки на скрипт 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>
Шивам
источник
Просто использовал это, чтобы исправить мой jschart.
indofraiser
это решило проблему, .js файл должен быть помещен перед ссылкой скрипта jQuery.
Научный метод
27

Хорошо, моя проблема была другой - это была модель защиты документов в Chrome .

Глядя на ответы здесь, было очевидно, что я как-то не загружал свои файлы jquery до вызова $(document).ready()функций и т. Д. Однако все они были в правильных позициях.

В моем случае это было связано с тем, что я получал доступ к контенту через защищенное соединение HTTPS, а страница пыталась загрузить данные, размещенные на CDN, из Google и т. Д. Решением было хранить их локально, а затем включать напрямую, а не из CDN каждый раз.

Изменить : Другой способ сделать это, чтобы связать все размещенные на CDN вещи как https: //, а не http: // - тогда модель не будет жаловаться.

Судипта Чаттерджи
источник
5
Также обратите внимание, что вы можете оставить протокол вне ссылок, и он выберет подходящий в зависимости от контекста (при условии, что существуют версии http и https). См. Stackoverflow.com/a/3622615/4332
Адриан Муат
Ага. это решило мою проблему, я загружал скрипты из URL-адреса следующим образом: // cdnjs.cloudflare.com / ajax / libs / jquery / 1.12.0 / jquery.min.js´. Использование « cdnjs ...» прекрасно работает
user9869932
25

Добавьте библиотеку перед запуском скрипта. Вы можете добавить любой из следующих CDN, чтобы запустить ее.

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

Если вам нужна любая другая версия Jquery cdn, проверьте эту ссылку .

После этого:

<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
источник
19

Если это в WordPress, возможно, потребуется изменить

$(document).ready(function() {

в

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

или добавить

var $ = jQuery;

перед

$(document).ready(function() {
xoxn-- 1'w3k4n
источник
19

У меня была точно такая же проблема, и ни одно из этих решений не помогло. однако я просто связал .cssфайлы после .jsфайлов, и проблема чудесным образом исчезла. Надеюсь это поможет.

crowicked
источник
13
Во-первых, для лучшей производительности рендеринга страниц вы всегда должны связывать CSS-файлы перед JS-файлами. Во-вторых, порядок файлов css и js не должен влиять на текущую ситуацию.
Узбекджон
12
«То, что решило вашу проблему, не должно решить вашу проблему, и вы не должны делать то, что решило вашу проблему».
Андрей
15

Я хотел попробовать сделать мой скрипт асинхронным . Затем я забыл об этом, и когда я начал работу, файл [custom] .js загружался только в 50% случаев до jQuery.js.

Итак, я изменился

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

в

<script src="js/script.js"></script>
Синдри Лур
источник
14

В моем случае это было referenceError, поскольку порядок вызовов скриптов был неправильным. Решил это, изменив порядок:

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

в

<script src="js/jquery-1.10.2.js"></script>
<script src="js/index.js"></script>
Яннис Дран
источник
1
В основном это была проблема, которую я тоже обнаружил, когда возникает ошибка ссылки для '$'
Дипак
9

У меня была та же проблема, и я решил, поместив jQuery на вершину всех кодов JavaScript, которые есть в моем коде.

Что-то вроде этого:

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

Надежда может помочь кому-то в будущем.

Мертвец
источник
8

Вы звоните ready() функцию до включения jQuery JavaScript. Ссылка JQuery в первую очередь.

Если вы находитесь в ASP.NET MVC, вы можете указать, когда должен отображаться ваш код JS, выполнив следующее:

1, В вашей page.cshtmlобертке ваш <script>тега в секцию, и дать ему имя, общее имя для использования в «сценарии»:

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

2. В _Layout.cshtmlдобавлении вашей страницы @RenderSection("Scripts", required: false)не забудьте поставить его после ссылки на источник Jquery, это сделает ваш код JS визуализированным позже, чем Jquery.

Майер Спитцер
источник
6

Если вы делаете это в .Net и правильно ссылаетесь на файл скрипта, а jQuery выглядит нормально, убедитесь, что ваши пользователи имеют доступ к файлу скрипта. У проекта, над которым я работал (коллега), был свой web.config, запрещающий доступ анонимным пользователям. Страница, над которой я работал, была доступна анонимным пользователям, поэтому у них не было доступа к файлу скрипта. Бросил следующее в web.config и все было правильно в мире:

  <location path="Scripts">
    <system.web>
      <authorization>
        <allow users="*"/>
      </authorization>
    </system.web>
  </location>
peroija
источник
6

В моем случае это была опечатка, я забыл обратную косую черту и неправильно ссылался на источник.

Перед src="/scripts/jquery.js"

После    src="scripts/jquery.js"

Деннис
источник
5

Исходный файл jquery-1.2.6.min.jsне называется, команда jQuery $()выполняется раньше, чем<..src='jquery-1.2.6.min.js'> .

Пожалуйста, запустите <.. src="/js/jquery-1.2.6.min.js..">сначала и убедитесь, что путь src указан правильно, затем выполните команду jquery

$(document).ready(function() 
Чарльз Сюй
источник
5

Это случилось со мной раньше.

Причина была в том, что я подключаю андроид к веб-просмотру с помощью JS. И я отправил параметр без кавычек.

js.sayHello(hello);

и когда я изменил его на

js.sayHello('hello');

это сработало.

Reinherd
источник
Я понятия не имею, что означает параметр без кавычек ... похоже, у вас была ошибка ссылки.
Алуан Хаддад
У меня была проблема во Freemarker, и причиной было отсутствие одинарных кавычек, поэтому значение обрабатывалось не как строка, а как переменная
torina
4

Ваш файл JavaScript отсутствует, поэтому произошла эта ошибка. Просто добавьте файл JavaScript внутри <head>тега. Смотрите пример:

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

или добавьте следующий код в тег:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Гаурав Гупта
источник
4

Ошибка будет возникать и в следующих двух сценариях.

  1. Элемент @section scripts отсутствует в файле HTML
  2. Ошибка доступа к элементам DOM. Например, доступ к элементу DOM упоминается как $ ("js-toggle") вместо $ (". Js-toggle"). На самом деле период отсутствует

Итак, 3 вещи, которым нужно следовать - проверьте, добавлены ли необходимые сценарии, проверьте, добавлен ли он в требуемом порядке, и проверьте ошибки третьего синтаксиса в вашем скрипте Java.

Санкар Кришнамурты
источник
Да. и для атрибутов id $ ('# someDiv')
cagcak
3

Doh! У меня были смешанные кавычки в моих тегах, которые приводили к разрыву ссылки jquery. Проверка в Chrome позволила мне увидеть, что файл не был правильно связан.

justreed
источник
3

В моем случае я забыл включить это:

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

Ранее я включал только jquery-mobile, который вызывал эту ошибку.

Ананд
источник
3

Я изменил тег script, чтобы он указывал на правильный контент, и изменил порядок сценариев, чтобы он был правильным в редакторе. Но совершенно забыл сохранить изменения.

Hexodus
источник
2

У меня была похожая проблема, и это потому, что мне не хватало закрывающей> ссылки на таблицу стилей.

Ясон
источник
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>

У меня есть похожая проблема, и вы знаете что, это из-за того, что сеть отключена, когда я тестирую в веб-представлении устройства Android, и я не осознаю этого, и локальный JS не проблема для загрузки, потому что ему не нужна сеть. Это кажется смешным, но я потратил ~ 1 час, чтобы понять это.

Фрукты
источник
2

Вы не ссылались на библиотеку jQuery.

Вам нужно будет включить строку, похожую на эту в вашем HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Асгар
источник
2

У меня была похожая проблема. Мой тестовый сервер работал нормально с "http". Однако это не удалось в производстве, у которого был SSL.

Таким образом, в производстве я добавил «HTPPS» вместо «HTTP», а в тесте я сохранил «HTTP».

Тестовое задание:

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

Производство:

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

Надеюсь, что это поможет кому-то, кто работает над WordPress.

user3671115
источник
1

Как ни странно, моя проблема исходила от PHP.

Вызов API-интерфейса REST не удался и впоследствии он прерывал загрузку библиотек. Так как сбой был от вызова REST, он не дал мне ошибку компиляции php.

Сохраните это как вариант, если загрузка jquery кажется нормальной.

Арис
источник
1

У меня была эта проблема, когда я просматривал интернет через мобильную точку доступа. он также сжимал изображения и добавлял следующий скрипт внизу тега body

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

Когда я подключился к правильному подключению Wi-Fi, кажется, все работает найти для меня. Надеюсь, это поможет кому-то.

пузыри
источник
1

Это также может произойти, если есть проблемы с сетью. Это означает, что, хотя «сценарии jquery» имеются и включены до использования, поскольку сценарии jquery недоступны во время загрузки страницы, следовательно, определения для «$» обрабатываются как "неопределенные ссылки".

ДЛЯ ИСПЫТАНИЙ / ЦЕЛЕЙ ОТЛАДКИ :: Вы можете попытаться получить доступ к URL "jquery-script" в браузере. Если она доступна, ваша страница должна загружаться должным образом, иначе она покажет указанную ошибку (или другие ошибки, относящиеся к скрипту). Пример - http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js должен быть доступен в браузере (или в контексте браузера).

У меня была похожая проблема, при которой я смог загрузить html-страницу (используя скрипты) в моем windows-host-browser, но не смог загрузить в vm-ubuntu. Решив проблему с сетью, проблема была решена.

parasrish
источник
0
var $ = jQuery;
jQuery(document).ready(function($){
Джаянит Сатани
источник
1
Это абсолютно не ответ. Вы должны добавить некоторые объяснения.
jmlemetayer
Это решение для Wordpressвас должно упомянуть об этом.
Гексодус
Ты спас мой день. Я изо всех сил пытался сделать это в WordPress, и никто, кроме этого решения, не работал как шарм.
Рахимв