Bootstrap genera un errore non rilevato: JavaScript di Bootstrap richiede jQuery [chiuso]

172

Sto cercando di utilizzare Bootstrap per creare un'interfaccia per un programma. Ho aggiunto jQuery 1.11.0 al <head>tag e ho pensato che fosse quello, ma quando avvio la pagina Web in un browser jQuery segnala un errore:

Uncaught Error: Bootstrap's JavaScript requires jQuery

Ho provato a utilizzare jQuery 1.9.0, ho provato con copie ospitate su più CDN, ma non riesco a farlo funzionare. Qualcuno può sottolineare cosa sto facendo di sbagliato?

— Munim Munna
fonte

28

Includi jQuery prima di Bootstrap ...

— Adriano Repetti,

Nel mio caso, ho installato jquery prima di bootstrap e poi ha funzionato bene. Il solo fatto di includere prima di bootstrap non ha risolto l'errore.

— Stuti Verma,

Nel mio caso, invece di aggiungere jquery nel piè di pagina (come nel modello bootstrap); L'ho aggiunto nell'intestazione. Problema risolto.

— Adeel Raza Azeemi,

1

basta aggiungere

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

prima dello script di importazione bootstrap. Copia l'ultimo CDN qui: cdnjs.com/libraries/jquery

— Tina Lee,

373

Prova questo

Cambia l'ordine dei file dovrebbe essere come sotto ..

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

85

Non funziona per me. Ho jQuery prima di Bootstrap e ricevo comunque l'errore!

— Verde,

2

ha funzionato ma ha una barra di scorrimento orizzontale nella parte inferiore

— HimalayanCoder

1

Se non funziona da questo .. potrebbe essere che jQuery sia installato tramite Bower e quindi potrebbe essere necessario guardare sotto bower_components / jquery / dist / jquery.js .. la parte "dist" è quella che avevo trascurato.

— Jax Cavalera,

Ha lavorato per me per un progetto Django-Oscar. Questo errore inizia ad apparire di punto in bianco. Suppongo che il pasticciare con un codice completamente non correlato possa cambiare la sequenza di rendering e innescare questo errore.

— MadPhysicist,

apparentemente non ho notato che ho incluso bootstrap.js due volte - la prima volta era molto prima della query

— JJ Roman

91

Se ti trovi in un ambiente solo browser , usa la soluzione di SridharR .

Se ti trovi in un ambiente Node / CommonJS + Browser (ad es. Elettrone, nodo-webkit, ecc.); il motivo di questo errore è che la logica di esportazione di jQuery verifica innanzitutto module, non window:

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

Si noti che si esporta tramite module.exportsin questo caso; così jQuerye $non sono assegnati a window.

Quindi per risolvere questo, invece di <script src="path/to/jquery.js"></script>;

Basta assegnarlo da soli con una requiredichiarazione:

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

NOTA: se l'app per l'elettrone non è necessaria nodeIntegration, impostarla su in falsemodo da non aver bisogno di questa soluzione alternativa.

— Onur Yıldırım
fonte

3

window.jQuery = window.$ = require('jquery');questo ha funzionato per me nel tentativo di assemblare una build per il brunch con jQuery 2 e Bootstrap 3. Tuttavia, ho impiegato solo diverse ore per trovare la risposta :(. Questo requisito cambia nelle versioni successive di jQuery?

— rikkit

1

Non lo so, ma dal momento che questo non è un bug, non credo. Se l'app per l'elettrone non è necessaria nodeIntegration, impostala su in falsemodo da non aver bisogno di questa soluzione alternativa.

— Onur Yıldırım,

1

Devi installare jquery usando npm install jquerynon con bower.

— Syodage,

1

Utile per vedere come l'elettrone

— gestisce

Ancora non lo capisco, ma Laravel usa lo stesso approccio: github.com/laravel/laravel/blob/v5.7.0/resources/js/…

— Ryan

14

dovresti prima caricare jquery perché bootstrap usa le funzioni jquery. come questo:

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

7

Devi aggiungere JQuery prima di aggiungere 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
fonte

4

Hai fornito un ordine errato per JAVASCRIPT e BOOTSTRAP

per convenzione bootstrap deve seguire la definizione del 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
fonte

1

Nel mio caso la soluzione è davvero sciocca e strana.

Il codice seguente è stato precompilato dal file _Layout.cshtml. (NON scritto da me)

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

Ma, quando ho verificato nella cartella Scripts, jquery-1.10.2.min.js non era nemmeno disponibile. Quindi, sostituito il codice come sotto dove jquery-1.9.1.min.js è un file esistente:

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

— Ashok Kumar
fonte

1

Sto usando NodeJS e ho avuto lo stesso errore. Come le altre risposte, il problema era anche perché JQuery doveva essere caricato prima di Bootstrap; tuttavia, a causa delle caratteristiche di NodeJS, questa modifica doveva essere applicata nel file pipeline.js .

Il cambiamento in pipeline.js è stato così:

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',
];

Sto anche usando grunt per aiutare, e ha cambiato automaticamente l'ordine nella pagina html principale:

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

Spero che sia d'aiuto! Non hai detto quale fosse il tuo ambiente, quindi ho deciso di pubblicare questa risposta.

— Ernani
fonte

1

Se si sta utilizzando, è require.jsnecessario aggiungere window.$ = window.jQuery = require('jquery')in app.js

OPPURE è possibile effettuare il caricamento del file dipendente dopo il caricamento del file principale .. come il concetto seguente

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

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

Sopra il codice mostrato che bootstrapdipende da Jquerycosì ho aggiunto shime renderlo dipendente

— SantoshK
fonte

0

Se il tuo codice sembra corretto, verifica che jQuery sia stato caricato correttamente sul tuo server. Nel mio caso, i file jQuery sono stati pubblicati sul server dal mio IDE, ma il server Web aveva solo uno stub di file da 0 KB. Senza contenuto, il server non è riuscito a fornire il file al browser.

Dopo aver ripubblicato il file e verificato che il server ha effettivamente ricevuto l'intero file, la mia pagina Web ha smesso di darmi l'errore.

— Zarepheth
fonte

0

È necessario aggiungere JQuery js prima di aggiungere il file jst bootstrap, poiché BootStrap utilizza la funzione jqueries. Quindi assicurati di caricare prima jquery js e poi il file js di bootstap.

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

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

— Jani Devang
fonte

0

Se ciò si verifica solo su Intranet IE, controlla le impostazioni di compatibilità e deseleziona "Visualizza i siti Intranet in modalità Compatibilità".

IE -> Impostazioni -> Compatibilità

— Davut Gürbüz
fonte

0

Sui documenti ufficiali: 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
fonte

1

L'ho risolto su angular.json con il codice "" script ": [" node_modules / jquery / dist / jquery.min.js "," node_modules / bootstrap / dist / js / bootstrap.min.js "]"

— AntWo

0

Avevo provato quasi tutti i metodi di cui sopra.

Finalmente risolto includendo il file

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

subito dopo aver caricato i file statici, ad esempio {% load staticfiles %}in base.html

— Kanika
fonte

0

Dopo aver lottato con questo problema ho fatto tre passi:

Utilizzare le versioni jQuery ovunque tra 1.9.0 e 3.0.0
Dichiarare il file jQuery prima di dichiarare il file Bootstrap
Dichiarare questi due file di script nella parte inferiore dei <body></body>tag anziché in <head></head>. Questi hanno funzionato per me, ma potrebbero esserci comportamenti diversi in base al browser che stai utilizzando.

— Karisno1
fonte