Bootstrap Yakalanmadı Hatası veriyor: Bootstrap'ın JavaScript'i jQuery gerektirir [kapalı]

172

Bir program için arabirim yapmak için Bootstrap kullanmaya çalışıyorum. <head>Etikete jQuery 1.11.0 ekledim ve bunun olduğunu düşündüm, ancak web sayfasını bir tarayıcıda başlattığımda jQuery bir hata bildirdi:

Uncaught Error: Bootstrap's JavaScript requires jQuery

JQuery 1.9.0 kullanmayı denedim, birkaç CDN'de barındırılan kopyalarla denedim, ancak çalışamıyorum. Yanlış yaptığımı kimse belirtebilir mi?

— Munim Munna
kaynak

28

Bootstrap önce jQuery dahil ...

— Adriano Repetti

Benim durumumda, bootstrap önce jquery yükledim ve sonra iyi çalıştı. Sadece bootstrap önce dahil olmak üzere hatayı çözmedi.

— Stuti Verma

Benim durumum, altbilgi (bootstrap şablonunda olduğu gibi) jquery eklemek yerine; Başlığa ekledim. Sorun çözüldü.

— Adeel Raza Azeemi

1

sadece

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

bootstrap içe aktarma komut dosyasından önce ekleyin . En son CDN'yi

— Tina Lee

372

Bunu dene

Aşağıdaki gibi olması gereken dosyaların sırasını değiştirin.

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

85

Benim için çalışmıyor. Bootstrap önce jQuery var ve yine de hata olsun!

— Yeşil

2

çalıştı ama altta yatay bir kaydırma çubuğu var

— HimalayanCoder

1

Eğer bu çalışmıyorsa .. jQuery Bower üzerinden yüklenmiş olabilir ve bu yüzden bower_components / jquery / dist / jquery.js .. altında bakmak zorunda olduğum "dist" kısmı bakmak gerekir.

— Jax Cavalera

Benim için bir Django-Oscar projesi için çalıştı. Bu hata mavi renkte görünmeye başlıyor. Tamamen ilgisiz bir kodla karışıklık oluşturma sırasını değiştirebilir ve bu hatayı tetikleyebiliriz.

— MadPhysicist

Görünüşe göre ben bootstrap.js iki kez dahil olduğunu fark etmedi - ilk kez sorgu önce yoluydu

— JJ Roman

91

Eğer bir iseniz Tarayıcı Okunur ortamda , kullanım SridharR 'ın çözüm.

Bir Düğüm / CommonJS + Tarayıcı ortamındaysanız (örn. Elektron, düğüm-webkit vb.); Bu hatanın nedeni olduğunu jQuery'nin ihracat mantığı ilk çekler moduledeğil, window:

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

module.exportsBu durumda kendisini ihraç ettiğini unutmayın ; yani jQueryve $atanmaz window.

Yani bunu çözmek için <script src="path/to/jquery.js"></script>;

Sadece bir requireifadeyle kendiniz atayın :

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

NOT: Elektron uygulamanız gerekmiyorsa nodeIntegration, falsebu geçici çözüme ihtiyacınız olmayacak şekilde ayarlayın .

— Onur Yıldırım
kaynak

3

window.jQuery = window.$ = require('jquery');Bu benim jQuery 2 ve Bootstrap 3 ile bir brunch yapı montaj denemek için çalıştı. Ama cevap bulmak için sadece bana birkaç saat sürdü :(. jQuery sonraki sürümlerinde bu gereksinim değişir mi?

— rikkit

1

Bilmiyorum ama bu bir hata olmadığı için sanmıyorum. Elektron uygulamanız gerekmiyorsa nodeIntegration, falsebu geçici çözüme ihtiyacınız olmayacak şekilde ayarlayın .

— Onur Yıldırım

1

npm install jqueryBower ile değil kullanarak jquery yüklemeniz gerekir .

— syodage

1

Elektronun pencere tabanlı bir uygulamadan farklı kütüphanelerle nasıl başa çıktığını görmek için

— kullanışlıdır

Hala anlamıyorum, ancak Laravel aynı yaklaşımı kullanıyor: github.com/laravel/laravel/blob/v5.7.0/resources/js/…

— Ryan

14

önce jquery yüklemelisiniz çünkü bootstrap jquery özelliklerini kullanır. bunun gibi:

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

7

Bootstrap- eklemeden önce JQuery eklemeniz gerekir.

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

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

— Vivek Panday
kaynak

4

JAVASCRIPT ve BOOTSTRAP için yanlış sipariş verdiniz

Kongre tarafından bootstrap jquery dosya tanımı takip etmelidir

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

1

Benim durumumda çözüm gerçekten aptalca ve garip.

Aşağıdaki kod _Layout.cshtml dosyası tarafından önceden doldurulmuştur. (Bana yazmadım)

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

Ancak, Scripts klasöründe doğruladığımda, jquery-1.10.2.min.js bile mevcut değildi. Bu nedenle, jquery-1.9.1.min.js dosyasının varolan bir dosya olduğu aşağıdaki gibi değiştirildi:

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

— Ashok kumar
kaynak

1

NodeJS kullanıyorum ve aynı hatayı aldım. Diğer cevaplar gibi, sorun da JQuery'nin Bootstrap'tan önce yüklenmesi gerektiğiydi; ancak, NodeJS özellikleri nedeniyle bu değişikliğin pipeline.js dosyasında uygulanması gerekiyordu .

Pipeline.js'deki değişiklik şöyleydi:

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

Ben de yardımcı olmak için grunt kullanıyorum ve otomatik olarak ana html sayfasında sırasını değiştirdi:

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

Umarım yardımcı olur! Ortamınızın ne olduğunu söylemediniz, bu yüzden bu cevabı göndermeye karar verdim.

— Ernani
kaynak

1

Eğer app.js'yi require.jseklemeniz window.$ = window.jQuery = require('jquery')gerekiyorsa

VEYA üst dosya yüklendikten sonra bağımlı dosya yükü yapabilirsiniz .. aşağıdaki kavram gibi

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

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

Yukarıda gösterilen kod bootstrapbağlı olarak Jqueryekledim shimve bağımlı olun

— SantoshK
kaynak

0

Kodunuz iyi görünüyorsa, jQuery'nin sunucunuza başarıyla yüklendiğini doğrulayın. Benim durumumda, jQuery dosyaları IDE tarafından sunucuya yayınlandı, ancak web sunucusunda yalnızca 0 KB dosya saplaması vardı. Hiçbir içerik olmadan, sunucu dosyayı tarayıcıya sunamadı.

Dosyayı yeniden yayınladıktan ve sunucunun tüm dosyayı gerçekten aldığını doğruladıktan sonra, web sayfam bana hata vermeyi durdurdu.

— Zarepheth
kaynak

0

BootStrap jqueries işlevini kullandığından, bootstrap js dosyasını eklemeden önce JQuery js eklemeniz gerekir. Bu yüzden ilk jquery js ve sonra bootstap js dosyasını yüklediğinizden emin olun.

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

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

— Jani Devang
kaynak

0

Bu yalnızca IE intranetinde gerçekleşirse, uyumluluk ayarlarını kontrol edin ve "Intranet sitelerini Uyumluluk modunda görüntüle" seçeneğinin işaretini kaldırın.

IE -> ayarlar -> uyumluluk

— Davut Gürbüz
kaynak

0

Resmi dokümanlarda: 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
kaynak

1

Angular.json üzerinde "" scriptler "kodu ile düzelttim: [" node_modules / jquery / dist / jquery.min.js "," node_modules / bootstrap / dist / js / bootstrap.min.js "]"

— AntWo

0

Yukarıdaki yöntemlerin neredeyse tamamını denemiştim.

Sonunda

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

staticfiles yüklendikten hemen sonra {% load staticfiles %}(base.html)

— kanika
kaynak

0

Bu sorunla mücadele ettikten sonra üç adım attım:

1.9.0 ve 3.0.0 arasında herhangi bir yerde jQuery sürümlerini kullanın
Bootstrap dosyasını bildirmeden önce jQuery dosyasını bildirin
Bu iki komut dosyasını <body></body>etiketlerin yerine etiketlerin altında belirtin <head></head>. Bunlar benim için çalıştı, ancak kullandığınız tarayıcıya bağlı olarak farklı davranışlar olabilir.

— Karisno1
kaynak