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?

jquery html css twitter-bootstrap twitter-bootstrap-3 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

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

Jawaban: