Модальный режим начальной загрузки: не является функцией

109

У меня на странице есть модальное окно. Когда я пытаюсь вызвать его при загрузке Windows, он выводит на консоль сообщение об ошибке:

$(...).modal is not a function

Это мой модальный HTML:

<div class="modal fade" id="prizePopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">
                This Modal title
            </h4>
        </div>
        <div class="modal-body">
            Add some text here
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">
                Submit changes
            </button>
        </div>
    </div>
</div>

<script type="text/javascript" src="js/bootstrap.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

И это мой JavaScript, с помощью которого можно запускать его при загрузке окна:

<script type="text/javascript">
$(window).load(function() {
    $('#prizePopup').modal('show');
});
</script>

Как я могу исправить эту проблему?

подлый
источник
1
напишите свой модальный код триггера в функции готовности окна
юги
"$ (window) .load (function () {" спас меня
khaled_webdev
2
Если дважды определить экземпляр JQuery, возникнет проблема. <script src = "// code.jquery.com/jquery-1.11.0.min.js"> </script>
pragadeesh

Ответы:

170

У вас проблема с порядком скриптов. Загрузите их в таком порядке:

<!-- jQuery -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- BS JavaScript -->
<script type="text/javascript" src="js/bootstrap.js"></script>
<!-- Have fun using Bootstrap JS -->
<script type="text/javascript">
$(window).load(function() {
    $('#prizePopup').modal('show');
});
</script>

Почему это? Поскольку Bootstrap JS зависит от jQuery :

Зависимости плагинов

Некоторые плагины и компоненты CSS зависят от других плагинов. Если вы включаете плагины по отдельности, обязательно проверьте наличие этих зависимостей в документации. Также обратите внимание, что все плагины зависят от jQuery (это означает, что jQuery должен быть включен перед файлами плагинов ).

Ионика Бизэу
источник
2
У меня все еще есть эта проблема, когда я пытаюсь запустить модальное окно с помощью инструментов разработчика Google.
Coded Container
@CodedContainer Убедитесь, что $это функция jQuery. Скорее всего, это querySelectorфункция (названная $), которую предоставляют инструменты разработчика Google Chrome.
Ionică Bizău
73

Это предупреждение также может отображаться, если jQuery объявлен в вашем коде более одного раза. Второе объявление jQuery препятствует правильной работе bootstrap.js.

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
...
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
Нурп
источник
спасибо за этот момент, я столкнулся с этой проблемой и обнаружил, что мой собственный DataTable.min.js импортировал в него библиотеки jquery, но моя страница снова импортирует его, это была основная проблема.
Alter Hu
Очень хороший совет, я установил jquery npm в Aurelia, а также вручную загрузил в index.html. Спасибо!
IngoB
В большом фреймворке, на котором я работаю, с ужасной настройкой, jQuery загружается на некоторых страницах, но на других: после того, как я пару раз ударился головой, зашел сюда и прочитал ответ @Nurp. Спас мой день.
Nineoclick,
Проблема в том, что я использую приложение, которое зависит от более старой версии jquery, и мне не разрешено изменять, и оно импортируется позже на каком-то этапе! Я использовал последнюю версию jquery, а затем загрузил js, что вызвало все проблемы!
heman123
Это тоже была моя проблема. Я удалил jquery из раздела сценариев в angular.js, а также удалил «import * as $ from 'jquery'» из Typescript, и все заработало.
Йенс Мандер
15

Проблема возникает из-за наличия экземпляров jQuery более одного раза. Будьте осторожны, если вы используете много файлов с несколькими экземплярами jQuery. Просто оставьте 1 экземпляр jQuery, и ваш код будет работать.

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
Хуан Камило Кольменарес Роша
источник
14

jQuery должен быть первым:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
Даштинежад
источник
14

Причины ошибки TypeError: $ (…) .modal не является функцией:

  1. Скрипты загружаются в неправильном порядке.
  2. Несколько экземпляров jQuery

Решения:

  1. В случае, если сценарий попытается получить доступ к элементу, который еще не был достигнут, вы получите сообщение об ошибке. Bootstrap зависит от jQuery, поэтому сначала необходимо указать jQuery. Итак, вы должны называться jquery.min.js, а затем bootstrap.min.js, и далее модальная ошибка начальной загрузки на самом деле является результатом того, что вы не включили javascript начальной загрузки перед вызовом модальной функции. Модальный режим определяется в bootstrap.js, а не в jQuery. Итак, сценарий должен быть включен таким образом

       <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
       <script type="text/javascript" src="js/bootstrap.js"></script>
    
  2. Если существует несколько экземпляров jQuery, второе объявление jQuery препятствует правильной работе bootstrap.js. так что используйте jQuery.noConflict();перед вызовом модального всплывающего окна

    jQuery.noConflict();
    $('#prizePopup').modal('show');
    

    псевдонимами событий JQuery нравится .load, .unloadили не .errorрекомендуется , так как JQuery 1.8.

    $(window).on('load', function(){ 
          $('#prizePopup').modal('show');
    });
    

    ИЛИ попробуйте открыть модальное всплывающее окно напрямую

    $('#prizePopup').on('shown.bs.modal', function () {
          ...
    });
    
Nɪsʜᴀɴᴛʜ ॐ
источник
Спасибо, в моем случае я загружал два экземпляра jQuery.
Санджай Ачар
10

изменить порядок скрипта

Поскольку bootstrap - это плагин jquery, для его выполнения требуется Jquery.

Виторино Фернандес
источник
5

Сработало изменение оператора импорта. Из

import * as $ from 'jquery';

кому:

declare var $ : any;
Ранджит8082
источник
4

Бегать

npm i @types/jquery
npm install -D @types/bootstrap

в проекте, чтобы добавить типы jquery в ваш проект Angular. После этого включить

import * as $ from "jquery";
import * as bootstrap from "bootstrap";

в вашем app.module.ts

Добавить

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

в вашем index.html непосредственно перед закрывающим тегом тела.

А если вы используете Angular 2-7, включите « jquery » в поле типов файла tsconfig.app.json.

Это удалит все ошибки 'модального' и '$' в вашем проекте Angular.

Cyperpunk
источник
4

Я встречаю эту ошибку при интеграции модального бутстрапа в angular.

Это мое решение этой проблемы.

Делюсь за кого беспокойство.

Первым шагом вам необходимо установить jqueryи bootstrapпо npmкоманде.

Во-вторых, вам нужно добавить declare var $ : any;компонент

И использование может использовать $('#myModal').modal('hide');метод onSave ()

Демо https://stackblitz.com/edit/angular-model-bootstrap-close?file=src/app/app.component.ts

Хиен Нгуен
источник
1

Использование:

jQuery.noConflict();
$('#prizePopup').modal('toggle');
Херсон Мартинес
источник
0

Проблема возникла со мной только в процессе производства только потому, что я импортировал jquery с HTTP, а не HTTPS (а производство - HTTPS)

Патрик из команды NDepend
источник
0

Я немного опоздал на вечеринку, но есть важное замечание:

Ваши сценарии могут быть в правильном порядке, но следите за любыми asyncбуквами s в теге сценария (например, здесь)

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

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

Мартин Шишков
источник
Код в вопросе ясно показывает, что (а) они расположены не в правильном порядке и (б) они не используют атрибут async
Квентин
1
Я даю свой ответ, потому что это вопрос, который часто
Мартин Шишков
0

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

Наконец исправил это, сделав следующее изменение:

(перед):

$('#myModal').modal('hide');

(после):

window.$('#myModal').modal('hide');

Нашел ответ здесь: https://github.com/ColorlibHQ/AdminLTE/issues/685

WeekendHacker
источник
-1

Вы должны включить:

bootstrap.min.css
jquery.min.js
bootstrap.min.js

J4GD33P 51NGH
источник