TypeError: $(...). Modal не является функцией с bootstrap Modal

Ответ 1

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

также проверьте, не включен ли jQuery дважды

:)

это была проблема для меня

Ответ 2

Эта ошибка на самом деле является результатом того, что вы не включаете javascript bootstrap перед вызовом функции modal. Модаль определяется в bootstrap.js, а не jQuery. Также важно отметить, что bootstrap действительно нуждается в jQuery для определения функции modal, поэтому очень важно, чтобы вы включили jQuery перед включением javascript для загрузки. Чтобы избежать ошибки, обязательно включите jQuery, затем загрузите javascript перед вызовом функции modal. Обычно я делаю следующее в теге заголовка:

<header>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="/path/to/bootstrap/js/bootstrap.min.js"></script>
</header>

Ответ 3

После связывания вашего jquery и bootstrap напишите свой код чуть ниже тегов Script jquery и bootstrap.

$(document).ready(function($) {
  $("#div").on("click", "a", function(event) {
    event.preventDefault();
    jQuery.noConflict();
    $('#myModal').modal('show');

  });
});

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Ответ 4

Убедитесь, что библиотека jquery не включена в html, загружаемую с помощью Ajax.remove <script src="~/Scripts/jquery[ver].js"></script> в AjaxUpdate/get_modal

Ответ 5

Другая возможность заключается в том, что один из других сценариев, включенных в вашу проблему, вызывает проблему, включая JQuery или конфликтует с $. Попробуйте удалить другие скрипты и посмотреть, исправляет ли они проблему. В моем случае, после нескольких часов ненужного поиска моего одного кода, я удалил скрипты в двоичном шаблоне поиска и сразу же обнаружил оскорбительный script.

Ответ 6

В моем случае я использую rails framework и дважды требую jQuery. Я думаю, что это возможная причина.

Вы можете сначала проверить файл app/assets/application.js. Если появятся jquery и bootstrap-sprockets, тогда нет необходимости в необходимости второй библиотеки. Файл должен быть похож на этот:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .

Затем проверьте приложение /views/layouts/application.html.erb и удалите script для запроса jquery. Например:

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

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

Ответ 7

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

jQuery.noConflict();
(function( $ ) {
  $(function() {
    // More code using $ as alias to jQuery
    $('button').click(function(){
        $('#modalID').modal('show');
    });
  });
})(jQuery);

Ответ 8

Я решил эту проблему в Laravel, изменив строку ниже в resources\assets\js\bootstrap.js

window.$ = window.jQuery = require('jquery/dist/jquery.slim');

в

window.$ = window.jQuery = require('jquery/dist/jquery');

Ответ 9

У меня была такая же проблема. Изменение

$.ajax(...)

to

jQuery.ajax(...)

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

Ответ 10

Бежать

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

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

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.

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

Ответ 11

Я решил эту проблему в ответ, используя его следующим образом.

window.$('#modal-id').modal();

Ответ 12

Для меня у меня было //= require jquery после //= require bootstrap. Как только я переместил jquery до начальной загрузки, все заработало.

Ответ 13

Я думаю, вы должны использовать в своей кнопке

<a data-toggle="modal" href="#form-content"    

вместо href должна быть цель данных

<a data-toggle="modal" data-target="#form-content"    

просто убедитесь, что модальное содержимое уже загружено

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