Uncaught ReferenceError: $не определен, когда jquery.js находится в конце документа

У меня есть проект, в котором все ссылки на JS файлы указаны в нижнем колонтитуле, как это рекомендуется для скорости загрузки страницы, включая ссылку на файл Jquery. Этот код создает "Uncaught ReferenceError", я предполагаю, что JQuery не был определен до того, как вызывается script:

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    </head>
    <body>
        <p>
            <a href="#" data-toggle="popover" title="first popover" id="example">hover over me</a>
        </p>
        <script type="text/javascript"> 
            $(function(){
                $('#example').popover({ trigger:'hover' });
            })
        </script>

        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
    </body>
</html>

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

Есть ли лучший способ объявить мою функцию, чтобы она не выбрасывала эту ошибку UncaughtReference или не поддерживала ли JQuery в голове лучшее решение?

Ответ 1

Это потому, что вы пытаетесь использовать jQuery до того, как загрузили jQuery. Вам нужно поставить libs как jQuery в начало вашего документа

<head>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
</head>

Обычно ваши сценарии идут в конце документа рядом с тегом тега тега, а библиотеки, такие как те, которые вы используете, идут в <head>

Ответ 2

Вам нужно включить jQuery перед ссылкой на библиотеку jQuery.

Изменить на это:

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

<script type="text/javascript"> 
$(function(){
   $('#example').popover({ trigger:'hover' });
});
</script>

Также обратите внимание, что рекомендуется добавить jQuery и другой JavaScript в нижний колонтитул вашего документа, чтобы гарантировать, что рендеринг страницы не задерживается.

Ответ 3

Мне нравится держать jquery внизу, вам просто нужно убедиться, что весь DOM загружен первым, и проверить, что без jQuery, который еще не используется. Попробуйте использовать это вместо:

document.addEventListener("DOMContentLoaded", function(event) { 
      $(function(){
          $('#example').popover({ trigger:'hover' });
      });
});

Ответ 4

Недавно на сайте jsTree я увидел другую технику

вверху (в теге HEAD) вы устанавливаете именно это:

<script>window.$q=[];window.$=window.jQuery=function(a){window.$q.push(a);};</script>

Теперь вы можете сделать <script>$(function () { /* your $() calls here */ });</script> когда и где хотите...

в конце включить jquery.js как usal, а затем последний script:

<script>$.each($q,function(i,f){$(f)});$q=null;</script>

надеюсь, что это полезно кому-то...

Ответ 5

Скрипты выполняются сверху вниз с документа в порядке, поэтому вы пытаетесь ссылаться на библиотеку jQuery перед ее загрузкой.

Чтобы решить эту проблему, вы можете поместить свои собственные скрипты в отдельный файл и импортировать их после библиотеки jQuery или поместить тэг script под импорт jQuery.