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?


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

Yanıtlar:


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>

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 .


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>

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>

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>

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>

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.


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


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.


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>

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

resim açıklamasını buraya girin


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>

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)


0

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

  1. 1.9.0 ve 3.0.0 arasında herhangi bir yerde jQuery sürümlerini kullanın
  2. Bootstrap dosyasını bildirmeden önce jQuery dosyasını bildirin
  3. 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.
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.