Modal bootstrap: bukan sebuah fungsi

108

Saya memiliki modal di halaman saya. Ketika saya mencoba untuk memanggilnya ketika jendela dimuat, itu mencetak kesalahan ke konsol yang mengatakan:

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

Ini adalah Modal HTML saya:

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

Dan ini adalah JavaScript saya untuk menjalankannya saat jendela dimuat:

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

Bagaimana cara memperbaiki masalah ini?

godheaper
sumber
1
tulis kode pemicu modal Anda di fungsi siap jendela
yugi
"$ (window) .load (function () {" menyelamatkan saya
khaled_webdev
1
Dengan mendefinisikan instance JQuery dua kali, masalah akan muncul. <script src = "// code.jquery.com/jquery-1.11.0.min.js"> </script>
pragadeesh

Jawaban:

169

Anda memiliki masalah dalam urutan skrip. Muat mereka dalam urutan ini:

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

Kenapa ini? Karena Bootstrap JS bergantung pada jQuery :

Ketergantungan plugin

Beberapa plugin dan komponen CSS bergantung pada plugin lain. Jika Anda menyertakan plugin satu per satu, pastikan untuk memeriksa dependensi ini di dokumen. Perhatikan juga bahwa semua plugin bergantung pada jQuery (ini berarti jQuery harus disertakan sebelum file plugin ).

Ionică Bizău
sumber
2
Saya masih mengalami masalah ini ketika saya mencoba menjalankan modal menggunakan alat dev google.
Wadah
@CodedContainer Pastikan $adalah fungsi jQuery. Kemungkinan besar itu adalah querySelectorfungsi (bernama $) yang diekspos oleh Alat Pengembang Google Chrome.
Ionică Bizău
72

Peringatan ini juga dapat ditampilkan jika jQuery dideklarasikan lebih dari satu kali dalam kode Anda. Deklarasi jQuery kedua mencegah bootstrap.js bekerja dengan benar.

<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>
Nurp
sumber
terima kasih untuk poin ini, saya menemui masalah ini dan menemukan bahwa DataTable.min.js saya sendiri telah mengimpor pustaka jquery ke dalamnya, tetapi halaman saya mengimpornya lagi, itulah akar masalah yang menyebabkannya.
Alter Hu
Petunjuk yang sangat bagus, saya menginstal jquery npm di Aurelia dan juga secara manual dimuat di index.html. Terima kasih!
IngoB
Dalam kerangka besar tempat saya bekerja, dengan pengaturan yang mengerikan, jQuery dimuat di beberapa halaman tetapi di halaman lain: setelah membenturkan kepala saya beberapa kali, buka di sini dan baca jawaban @Nurp. Menyelamatkan hariku.
Nineoclick
Masalahnya adalah saya menggunakan aplikasi yang memiliki ketergantungan pada versi jquery yang lebih lama dan saya tidak diizinkan untuk mengubahnya dan itu akan diimpor nanti pada tahap tertentu! saya telah menggunakan versi terbaru jquery dan kemudian bootstrap js, menyebabkan semua masalah!
heman123
Itu juga masalahku. Saya menghapus jquery dari bagian skrip di angular.js dan juga menghapus "import * as $ dari 'jquery'" dari Ketikan dan semuanya bekerja.
Jens Mander
15

Masalahnya adalah karena memiliki instance jQuery lebih dari satu kali. Berhati-hatilah jika Anda menggunakan banyak file dengan beberapa contoh jQuery. Biarkan saja 1 contoh jQuery dan kode Anda akan berfungsi.

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
Juan Camilo Colmenares Rocha
sumber
14

jQuery harus menjadi yang pertama:

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

Penyebab TypeError: $ (…) .modal bukan fungsi:

  1. Skrip dimuat dalam urutan yang salah.
  2. Beberapa contoh jQuery

Solusi:

  1. Dalam kasus, jika skrip mencoba mengakses elemen yang belum tercapai maka Anda akan mendapatkan kesalahan. Bootstrap bergantung pada jQuery, jadi jQuery harus direferensikan terlebih dahulu. Jadi, Anda harus dipanggil jquery.min.js dan kemudian bootstrap.min.js dan selanjutnya kesalahan Modal bootstrap sebenarnya adalah hasil dari Anda tidak memasukkan javascript bootstrap sebelum memanggil fungsi modal. Modal didefinisikan di bootstrap.js dan bukan di jQuery. Jadi skrip harus dimasukkan dengan cara ini

       <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
       <script type="text/javascript" src="js/bootstrap.js"></script>
  2. Jika ada beberapa contoh jQuery, deklarasi jQuery kedua mencegah bootstrap.js bekerja dengan benar. jadi manfaatkan jQuery.noConflict();sebelum memanggil popup modal

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

    alias acara jQuery suka .load, .unloadatau .errortidak digunakan lagi sejak jQuery 1.8.

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

    ATAU coba buka popup modal secara langsung

    $('#prizePopup').on('shown.bs.modal', function () {
          ...
    });
Nɪsʜᴀɴᴛʜ ॐ
sumber
Terima kasih, dalam kasus saya, saya memuat dua contoh jQuery.
Sanjay Achar
10

ubah urutan skrip

Karena bootstrap adalah plugin jquery sehingga membutuhkan Jquery untuk dieksekusi

Fernandes Vitorino
sumber
5

Mengubah pernyataan impor berhasil. Dari

import * as $ from 'jquery';

untuk:

declare var $ : any;
ranjeet8082
sumber
4

Lari

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

dalam proyek untuk menambahkan jenis jquery di Proyek Angular Anda. Setelah itu masukkan

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

di app.module.ts Anda

Menambahkan

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

di index.html Anda tepat sebelum tag penutup badan.

Dan jika Anda menjalankan Angular 2-7, masukkan " jquery " di kolom jenis file tsconfig.app.json.

Ini akan menghapus semua kesalahan 'modal' dan '$' dalam proyek Angular Anda.

cyperpunk
sumber
4

Saya menemui kesalahan ini ketika mengintegrasikan modal bootstrap dalam sudut.

Ini adalah solusi saya untuk mengatasi masalah ini.

Saya berbagi untuk siapa perhatian.

Langkah pertama Anda perlu menginstal jquerydan bootstrapdengan npmperintah.

Kedua, Anda perlu menambahkan declare var $ : any;komponen

Dan gunakan bisa menggunakan $('#myModal').modal('hide');metode onSave ()

Demo https://stackblitz.com/edit/angular-model-bootstrap-close?file=src/app/app.component.ts

Hien Nguyen
sumber
1

Menggunakan:

jQuery.noConflict();
$('#prizePopup').modal('toggle');
Jerson Martínez
sumber
0

Masalah terjadi pada saya hanya dalam produksi hanya karena saya mengimpor jquery dengan HTTP dan bukan HTTPS (dan produksi adalah HTTPS)

Patrick dari tim NDepend
sumber
0

Saya agak terlambat ke pesta, namun ada catatan penting:

Skrip Anda mungkin dalam urutan yang benar tetapi hati-hati terhadap semua yang ada asyncdi tag skrip Anda (seperti ini)

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

Ini mungkin penyebab masalahnya. Terutama jika Anda memiliki asyncset ini hanya untuk lingkungan Produksi, ini bisa sangat membuat frustrasi.

Martin Shishkov
sumber
Kode dalam pertanyaan dengan jelas menunjukkan bahwa (a) mereka tidak dalam urutan yang benar dan (b) mereka tidak menggunakan atribut async
Quentin
1
Saya memberikan jawaban saya karena ini adalah pertanyaan yang sering
dicari di
0

Berjuang untuk menyelesaikan yang satu ini, memeriksa urutan pemuatan dan jika jQuery disertakan dua kali melalui bundling, tetapi tampaknya itu bukan penyebabnya.

Akhirnya perbaiki dengan melakukan perubahan berikut:

(sebelum):

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

(setelah):

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

Temukan jawabannya di sini: https://github.com/ColorlibHQ/AdminLTE/issues/685

WeekendHacker
sumber
-1

Anda harus memasukkan:

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

J4GD33P 51NGH
sumber