jQuery - ошибка "$ не определен"

Question

У меня есть простое событие клика на jQuery:

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

Также у меня есть ссылка на jQuery, определенная в файле site.master:

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

Я проверил, что скрипт правильно разрешается, я могу увидеть разметку и просмотреть сам скрипт в Firebug, значит, он должен быть загружен. Однако я все равно получаю сообщение:

$ не определен

и никакие функции jQuery не работают. Я также пробовал различные варианты, такие как $(document).ready и jQuery и т.д.

Это приложение MVC 2 на .NET 3.5. Я уверен, что что-то делаю не так; везде на Google советуют проверить, правильно ли указана ссылка на файл, и я проверял это снова и снова. Пожалуйста, подскажите, что делать! 😕

Answer 1

Возможно, ваш тег <script> с собственным скриптом вызывается до того, как подключен 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>

jQuery подключается после вашего скрипта, что приводит к ошибке.

Чтобы это исправить, просто переместите подключение jQuery перед вашим скриптом. Исправленный код будет выглядеть так:

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

Теперь код будет работать корректно, и вы сможете использовать $ в вашем скрипте. 😉

Answer 2

Сначала вам нужно убедиться, что скрипт jQuery загружен. Это может быть сделано через CDN или локально на вашем сайте. Если вы не загрузите jQuery перед тем, как попытаться его использовать, вы получите сообщение о том, что jQuery не определен.

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

Этот скрипт можно разместить в блоке <head> или в футере страницы, главное - убедиться, что он загружен перед вызовом любых других функций jQuery.

Затем вам нужно использовать одно из двух решений ниже:

(function($){
// здесь размещайте ваш стандартный код jQuery с префиксом $
// лучше всего использовать внутри страницы с инлайновым кодом,
// или вне document ready, пишите код здесь
})(jQuery);

или

jQuery(document).ready(function($){
// стандартный код загрузки страницы здесь с префиксом $
// обратите внимание: $ инициализируется внутри анонимной функции команды ready
});

Обратите внимание, что во многих случаях $(document).ready(function(){//код здесь}); может не сработать.

Answer 3

Если вызов плагина jQuery находится рядом с закрывающим тегом </body>, а ваш скрипт загружается до этого, вам следует сделать так, чтобы ваш код выполнялся после события window.onload, вот так:

window.onload = function() {
  //ВАШ JQUERY КОД
}

Таким образом, ваш код выполнится только после загрузки окна, когда все ресурсы уже загружены. В этот момент jQuery ($) будет определен.

Если вы используете такой вариант:

$(document).ready(function () {
  //ВАШ JQUERY КОД
});

то в данный момент $ еще не будет определён, поскольку этот код выполняется до загрузки jQuery, и ваш скрипт завершится с ошибкой на первой строке в консоли.

Answer 4

У меня была такая же ситуация, и я обнаружил, что у меня было много строк с

type="text/javacsript"

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

Answer 5

Используйте сектор Scripts в представлении и мастере.

Поместите все ваши скрипты, определенные в представлении, в сектор Scripts этого представления. Таким образом, вы сможете загрузить основной макет после загрузки всех остальных скриптов. Это стандартная настройка при создании нового веб-проекта на MVC5. Не уверен насчет более ранних версий.

Views/Foo/MyView.cshtml:

// Остальной код вашего представления выше.

@section Scripts 
{ 
    // Либо выполните рендеринг бандла с тем же именем, определенным в BundleConfig.cs...
    @Scripts.Render("~/bundles/myCustomBundle")

    // ...либо жестко закодируйте HTML.
    <script src="URL-TO-CUSTOM-JS-FILE"></script>

    <script type="text/javascript">
      $(document).ready(function () {
        // Здесь размещайте ваш пользовательский JavaScript для этого представления. 
        // Код выполнится после загрузки всех остальных скриптов.            
      });
    </script>
}

Views/Shared/_Layout.cshtml:

<html>
<body>
    <!-- ... Остальная часть вашего файла макета здесь ... -->

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

Обратите внимание, что сектор scripts рендерится последним в файле основного макета.

jQuery - ошибка "$ не определен"

5 ответ(ов)

Руководство по Markdown

Форматирование текста

Код

Списки

Поддерживаемые языки программирования

Популярные

Другие .NET

Базы данных