Bootstrap throws Uncaught Error: JavaScript Bootstrap membutuhkan jQuery [ditutup]

172

Saya mencoba menggunakan Bootstrap untuk membuat antarmuka untuk suatu program. Saya menambahkan jQuery 1.11.0 ke <head>tag dan berpikir itu adalah itu, tetapi ketika saya meluncurkan halaman web di browser jQuery melaporkan kesalahan:

Uncaught Error: Bootstrap's JavaScript requires jQuery

Saya telah mencoba menggunakan jQuery 1.9.0, saya telah mencoba dengan salinan yang di-host di beberapa CDN, tetapi saya tidak bisa membuatnya berfungsi. Adakah yang bisa menunjukkan kesalahan saya?

— Munim Munna
sumber

28

Sertakan jQuery sebelum Bootstrap ...

— Adriano Repetti

Dalam kasus saya, saya menginstal jquery sebelum bootstrap dan kemudian, itu berfungsi dengan baik. Hanya memasukkan sebelum bootstrap tidak menyelesaikan kesalahan.

— Stuti Verma

I case saya, bukannya menambahkan jquery di footer (seperti pada template bootstrap); Saya menambahkannya di header. Memecahkan masalah.

— Adeel Raza Azeemi

1

tambahkan saja

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>

sebelum skrip impor bootstrap. Salin CDN terbaru di sini: cdnjs.com/libraries/jquery

— Tina Lee

372

Coba ini

Ubah urutan file seharusnya seperti di bawah ini ..

<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/wow.min.js"></script>

— Sridhar R
sumber

85

Tidak bekerja untuk saya. Saya punya jQuery sebelum Bootstrap dan tetap mendapatkan kesalahan!

— Hijau

2

bekerja tetapi mendapat scrollbar horizontal di bagian bawah

— HimalayanCoder

1

Jika tidak berhasil dari ini .. mungkin jQuery diinstal melalui Bower dan jadi Anda mungkin perlu mencari di bawah bower_components / jquery / dist / jquery.js .. bagian "dist" adalah apa yang saya abaikan.

— Jax Cavalera

Bekerja untuk saya untuk proyek Django-Oscar. Kesalahan ini mulai muncul tiba-tiba. Saya kira mengacaukan kode yang sama sekali tidak terkait dapat mengubah urutan rendering dan memicu kesalahan ini.

— MadPhysicist

rupanya saya tidak melihat saya memiliki bootstrap.js termasuk dua kali - pertama kali itu jauh sebelum permintaan

— JJ Roman

91

Jika Anda berada di lingkungan Hanya Browser , gunakan solusi SridharR .

Jika Anda berada di lingkungan Node / CommonJS + Browser (mis. Elektron, node-webkit, dll.); alasan untuk kesalahan ini adalah bahwa logika ekspor jQuery pertama kali memeriksa module, bukan window:

if (typeof module === "object" && typeof module.exports === "object") {
    // CommonJS/Node
} else {
    // window
}

Perhatikan bahwa ia mengekspor sendiri melalui module.exportsdalam hal ini; begitu jQuerydan $tidak ditugaskan window.

Jadi untuk menyelesaikan ini, alih-alih <script src="path/to/jquery.js"></script>;

Cukup tetapkan sendiri dengan requirepernyataan:

<script>
    window.jQuery = window.$ = require('jquery');
</script>

CATATAN: Jika aplikasi elektron Anda tidak perlu nodeIntegration, atur falseagar Anda tidak perlu solusi ini.

— Onur Yıldırım
sumber

3

window.jQuery = window.$ = require('jquery');ini berhasil bagi saya yang mencoba merakit brunch build dengan jQuery 2 dan Bootstrap 3. Hanya butuh beberapa jam untuk menemukan jawaban Anda :(. Apakah persyaratan ini berubah dalam versi jQuery yang lebih baru?

— rikkit

1

Saya tidak tahu tetapi karena ini bukan bug, saya rasa tidak. Jika aplikasi elektron Anda tidak perlu nodeIntegration, atur falseagar Anda tidak perlu solusi ini.

— Onur Yıldırım

1

Anda harus menginstal jquery menggunakan npm install jquerynot with bower.

— syodage

1

Berguna untuk melihat bagaimana elektron berurusan dengan perpustakaan berbeda dari aplikasi berbasis jendela

— jwknz

Saya masih belum memahaminya, tetapi Laravel menggunakan pendekatan yang sama: github.com/laravel/laravel/blob/v5.7.0/resources/js/…

— Ryan

14

Anda harus memuat jquery terlebih dahulu karena bootstrap menggunakan fitur jquery. seperti ini:

<!doctype html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" src="css/animate.css">
        <link type="text/css" rel="stylesheet" src="css/bootstrap-theme.min.css">
        <link type="text/css" rel="stylesheet" src="css/bootstrap.min.css">
        <link type="text/css" rel="stylesheet" href="css/custom.css">

<!--   Shuffle your scripts HERE  -->
        <script src="js/jquery-1.11.0.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/wow.min.js"></script>
<!--   End  -->   

        <title>pyMeLy Interface</title>
    </head>
    <body>
        <p class="title1"><strong>pyMeLy</strong></p>
        <p class="title2"><em> A stylish way to view your media</em></p>
        <div style="text-align:center;">
            <button type="button" class="btn btn-primary">Movies</button>
            <button type="button" class="btn btn-primary btn-lg">Large button</button>
        </div>
    </body>
</html>

— 124
sumber

7

Anda perlu menambahkan JQuery sebelum menambahkan bootstrap-

<!-- JQuery Core JavaScript -->
<script src="lib/js/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="lib/js/bootstrap.min.js"></script>

— Vivek Panday
sumber

4

Anda telah memberikan pesanan yang salah untuk JAVASCRIPT dan BOOTSTRAP

dengan konvensi, bootstrap harus mengikuti definisi file jquery

<!-- JQuery Core JavaScript -->
<script src="lib/js/jquery.min.js"></script>
<script src="lib/js/jquery-ui.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="lib/js/bootstrap.min.js"></script>

— Mohit Singh
sumber

1

Dalam kasus saya solusinya benar-benar konyol, dan aneh.

Kode di bawah ini telah diisi sebelumnya oleh file _Layout.cshtml. (TIDAK ditulis oleh saya)

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>

Tetapi, ketika saya memverifikasi dalam folder Script, jquery-1.10.2.min.js bahkan tidak tersedia. Karenanya, kode yang diganti seperti di bawah ini di mana jquery-1.9.1.min.js adalah file yang sudah ada:

<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>

— Ashok kumar
sumber

1

Saya menggunakan NodeJS dan mendapatkan kesalahan yang sama. Seperti jawaban lain, masalahnya juga karena JQuery perlu dimuat sebelum Bootstrap; Namun, karena karakteristik NodeJS, perubahan ini harus diterapkan pada file pipeline.js .

Perubahan pipeline.js seperti ini:

var jsFilesToInject = [
  // Dependencies like jQuery, or Angular are brought in here
  'js/dependencies/angular.1.3.js',
  'js/dependencies/jquery.js',
  'js/dependencies/bootstrap.js',
  'js/dependencies/**/*.js',
];

Saya juga menggunakan grunt untuk membantu, dan secara otomatis mengubah urutan di halaman html utama:

<!--SCRIPTS-->
  <script src="/js/dependencies/angular.1.3.js"></script>
  <script src="/js/dependencies/jquery.js"></script>
  <script src="/js/dependencies/bootstrap.js"></script>
  <!-- other dependencies -->
<!--SCRIPTS END-->

Semoga ini bisa membantu! Anda tidak mengatakan apa lingkungan Anda, jadi saya memutuskan untuk mengirim jawaban ini.

— Ernani
sumber

1

Jika Anda menggunakan require.jsdaripada perlu menambahkan window.$ = window.jQuery = require('jquery')di app.js

ATAU Anda dapat membuat memuat file tergantung setelah file induk dimuat .. seperti konsep di bawah ini

require.config({
    baseUrl: "scripts/appScript",
    paths: {
        'jquery':'jQuery/jquery.min',
        'bootstrap':'bootstrap/bootstrap.min' 
    },
   shim
    shim: {
        'bootstrap':['jquery'],
        },

    // kick start application
    deps: ['app']
});

Kode di atas ditampilkan yang bootstraptergantung pada Jqueryjadi saya telah menambahkan shimdan membuatnya tergantung

— SantoshK
sumber

0

Jika kode Anda terlihat bagus, pastikan jQuery berhasil dimuat ke server Anda. Dalam kasus saya, file jQuery diterbitkan ke server oleh IDE saya, tetapi server web hanya memiliki rintisan file 0 KB. Tanpa konten, server gagal menyajikan file ke browser.

Setelah menerbitkan ulang file dan memverifikasi bahwa server benar-benar menerima seluruh file, maka halaman web saya berhenti memberi saya kesalahan.

— Zarepheth
sumber

0

Anda perlu menambahkan jQuery js sebelum menambahkan file js bootstrap, karena BootStrap menggunakan fungsi jqueries. Jadi pastikan untuk memuat jquery js pertama dan kemudian bootstap file js.

<!-- JQuery Core JavaScript -->
<script src="app/js/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="app/js/bootstrap.min.js"></script>

— Jani Devang
sumber

0

Jika ini terjadi hanya intranet IE, periksa pengaturan kompatibilitas dan hapus centang "Tampilkan situs intranet dalam mode Kompatibilitas".

IE -> pengaturan -> kompatibilitas

— Davut Gürbüz
sumber

0

Pada dokumen resmi: https://electronjs.org/docs/faq#i-can-not-use-jqueryrequirejsmeteorangularjs-in-electron

<head>
  <script>
  window.nodeRequire = require;
  delete window.require;
  delete window.exports;
  delete window.module;
  </script>
  <script type="text/javascript" src="jquery.js"></script>
</head>

— Fabio Souza
sumber

1

Saya memperbaikinya pada angular.json dengan kode "" skrip ": [" node_modules / jquery / dist / jquery.min.js "," node_modules / bootstrap / dist / js / bootstrap.min.js "]"

— AntWo

0

Saya telah mencoba hampir semua metode di atas.

Akhirnya diperbaiki dengan memasukkan

script src="{%static 'App/js/jquery.js' %}"

setelah memuat staticfiles yaitu {% load staticfiles %}di base.html

— kanika
sumber

0

Setelah berjuang dengan masalah ini saya mengambil tiga langkah:

Gunakan versi jQuery di mana saja antara 1.9.0 dan 3.0.0
Deklarasikan file jQuery sebelum mendeklarasikan file Bootstrap
Nyatakan dua file skrip ini di bagian bawah <body></body>tag daripada di <head></head>. Ini bekerja untuk saya, tetapi mungkin ada perilaku yang berbeda berdasarkan browser yang Anda gunakan.

— Karisno1
sumber