Bootstrap พ่นข้อผิดพลาดที่ไม่ได้ตรวจ: JavaScript ของ Bootstrap ต้องการ jQuery [ปิด]

172

ปิด. คำถามนี้ต้องการรายละเอียดการแก้จุดบกพร่อง ไม่ยอมรับคำตอบในขณะนี้

ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้เป็นไปตามหัวข้อสำหรับ Stack Overflow

ปิดให้บริการใน2 ปีที่ผ่านมา

ฉันพยายามใช้ Bootstrap เพื่อสร้างอินเตอร์เฟสสำหรับโปรแกรม ฉันเพิ่ม jQuery 1.11.0 ไปยัง<head>แท็กและคิดว่าเป็นเช่นนั้น แต่เมื่อฉันเปิดหน้าเว็บในเบราว์เซอร์ jQuery รายงานข้อผิดพลาด:

Uncaught Error: Bootstrap's JavaScript requires jQuery

ฉันได้ลองใช้ jQuery 1.9.0 ฉันได้ลองกับสำเนาที่โฮสต์ใน CDN หลายแห่ง แต่ฉันไม่สามารถใช้งานได้ ใครช่วยชี้สิ่งที่ฉันทำผิดได้ไหม

— Munim Munna
แหล่งที่มา

28

รวม jQuery ก่อน Bootstrap ...

— Adriano Repetti

ในกรณีของฉันฉันติดตั้ง jquery ก่อน bootstrap แล้วก็ทำงานได้ดี ก่อนหน้านี้รวมถึง bootstrap ไม่สามารถแก้ไขข้อผิดพลาดได้

— Stuti Verma

ฉันกรณีของฉันแทนการเพิ่ม jquery ในส่วนท้าย (เช่นในแม่แบบ bootstrap); ฉันเพิ่มไว้ในส่วนหัว แก้ไขปัญหา

— Adeel Raza Azeemi

1

เพียงเพิ่ม

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

ก่อนที่สคริปต์นำเข้า bootstrap คัดลอก CDN ล่าสุดที่นี่: cdnjs.com/l ไลบรารี/jquery

— Tina Lee

373

ลองสิ่งนี้

เปลี่ยนลำดับของไฟล์ควรเป็นดังนี้ ..

<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
แหล่งที่มา

85

ไม่ได้ผลสำหรับฉัน ฉันมี jQuery ก่อน Bootstrap และได้รับข้อผิดพลาด!

— Green

2

ทำงานได้ แต่มีแถบเลื่อนแนวนอนที่ด้านล่าง

— HimalayanCoder

1

ถ้ามันไม่ทำงานจากนี้ .. อาจเป็นไปได้ว่า jQuery ได้รับการติดตั้งผ่าน Bower และคุณอาจต้องดูภายใต้ bower_components / jquery / dist / jquery.js .. ส่วน "dist" ที่ฉันได้มองข้ามไป

— Jax Cavalera

ทำงานให้ฉันสำหรับโครงการ Django-Oscar ข้อผิดพลาดนี้เริ่มปรากฏขึ้นออกจากฟ้า ฉันคิดว่ายุ่งกับรหัสที่ไม่เกี่ยวข้องอย่างสมบูรณ์สามารถเปลี่ยนลำดับการแสดงผลและเรียกข้อผิดพลาดนี้

— MadPhysicist

เห็นได้ชัดว่าฉันไม่ได้สังเกตเห็นว่าฉันมี bootstrap.js รวมสองครั้ง - ครั้งแรกมันเป็นวิธีก่อนแบบสอบถาม

— JJ Roman

91

หากคุณอยู่ในสภาพแวดล้อมที่มีเฉพาะเบราว์เซอร์ให้ใช้โซลูชันของSridharR

หากคุณอยู่ในสภาพแวดล้อม Node / CommonJS + Browser (เช่นอิเล็กตรอน, node-webkit ฯลฯ ); เหตุผลสำหรับข้อผิดพลาดนี้คือตรรกะการส่งออกของ jQuery ตรวจสอบครั้งแรกmoduleไม่ใช่window:

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

โปรดทราบว่ามันส่งออกตัวเองผ่านทางmodule.exportsในกรณีนี้ เพื่อให้jQueryและไม่ได้รับมอบหมายให้ $window

ดังนั้นเพื่อแก้ไขปัญหานี้แทน<script src="path/to/jquery.js"></script>;

เพียงกำหนดด้วยตัวคุณเองด้วยrequireข้อความ:

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

หมายเหตุ: หากแอปอิเล็กตรอนของคุณไม่ต้องการnodeIntegrationให้ตั้งค่าเป็นfalseดังนั้นคุณจะไม่ต้องการวิธีแก้ปัญหานี้

— Onur Yıldırım
แหล่งที่มา

3

window.jQuery = window.$ = require('jquery');สิ่งนี้ได้ผลสำหรับฉันที่พยายามรวบรวมบรันช์บิวด์ด้วย jQuery 2 และ Bootstrap 3 ใช้เวลาหลายชั่วโมงในการหาคำตอบของคุณ :( ข้อกำหนดนี้เปลี่ยนไปใน jQuery รุ่นที่ใหม่กว่าไหม?

— rikkit

1

ฉันไม่รู้ แต่เนื่องจากนี่ไม่ใช่ข้อผิดพลาดฉันจึงไม่คิดอย่างนั้น หากแอปอิเล็กตรอนของคุณไม่ต้องการnodeIntegrationให้ตั้งเป็นfalseดังนั้นคุณจะไม่ต้องการวิธีแก้ปัญหานี้

— Onur Yıldırım

1

คุณต้องติดตั้ง jquery โดยnpm install jqueryไม่ใช้bower

— syodage

1

มีประโยชน์ในการดูว่าอิเล็กตรอนเกี่ยวข้องกับห้องสมุดต่างจากแอพที่ใช้หน้าต่างเป็น

— อย่างไร

ฉันยังไม่เข้าใจ แต่ Laravel ใช้วิธีการเดียวกัน: github.com/laravel/laravel/blob/v5.7.0/resources/js/…

— Ryan

14

คุณควรโหลด jquery ก่อนเพราะ bootstrap ใช้คุณสมบัติ jquery แบบนี้:

<!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
แหล่งที่มา

7

คุณต้องเพิ่ม JQuery ก่อนที่จะเพิ่ม 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
แหล่งที่มา

4

คุณระบุลำดับที่ไม่ถูกต้องสำหรับ JAVASCRIPT และ BOOTSTRAP

โดยหลักการ bootstrap ต้องเป็นไปตามข้อกำหนดของไฟล์ 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
แหล่งที่มา

1

ในกรณีของฉันเป็นวิธีแก้ปัญหาที่โง่และแปลก

โค้ดด้านล่างมีการเติมข้อมูลล่วงหน้าโดยไฟล์ _Layout.cshtml (ไม่ได้เขียนโดยฉัน)

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

แต่เมื่อฉันตรวจสอบในโฟลเดอร์สคริปต์ jquery-1.10.2.min.js ก็ไม่สามารถใช้ได้ ดังนั้นรหัสแทนที่เช่นด้านล่างโดยที่ jquery-1.9.1.min.js เป็นไฟล์ที่มีอยู่:

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

— Ashok kumar
แหล่งที่มา

1

ฉันใช้ NodeJS และได้รับข้อผิดพลาดเดียวกัน เช่นเดียวกับคำตอบอื่น ๆ ปัญหาก็เป็นเพราะ JQuery จำเป็นต้องโหลดก่อน Bootstrap; แต่เนื่องจากลักษณะ NodeJS การเปลี่ยนแปลงนี้จะต้องมีการ aplied ในไฟล์ pipeline.js

การเปลี่ยนแปลงไปป์ไลน์.jsเป็นดังนี้:

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

ฉันยังใช้เสียงฮึดฮัดที่จะช่วยและมันเปลี่ยนลำดับโดยอัตโนมัติในหน้า html หลัก:

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

หวังว่ามันจะช่วย! คุณไม่ได้พูดว่าสภาพแวดล้อมของคุณเป็นอย่างไรฉันจึงตัดสินใจโพสต์คำตอบนี้

— Ernani
แหล่งที่มา

1

หากคุณกำลังใช้require.jsเกินจำเป็นต้องเพิ่ม window.$ = window.jQuery = require('jquery')ใน app.js

หรือคุณสามารถทำการโหลดไฟล์ที่ขึ้นต่อกันหลังจากโหลดไฟล์หลัก .. เช่นแนวคิดด้านล่าง

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

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

รหัสด้านบนแสดงให้เห็นว่าbootstrapมันขึ้นอยู่กับJqueryดังนั้นฉันได้เพิ่มเข้าไปshimและทำให้มันขึ้นอยู่กับ

— SantoshK
แหล่งที่มา

0

หากรหัสของคุณดูดีให้ยืนยันว่าโหลด jQuery ไปยังเซิร์ฟเวอร์ของคุณสำเร็จ ในกรณีของฉันไฟล์ jQuery ถูกเผยแพร่ไปยังเซิร์ฟเวอร์โดย IDE ของฉัน แต่เว็บเซิร์ฟเวอร์มี stub ไฟล์ 0 KB เท่านั้น ไม่มีเนื้อหาเซิร์ฟเวอร์ล้มเหลวในการให้บริการไฟล์ไปยังเบราว์เซอร์

หลังจากเผยแพร่ไฟล์อีกครั้งและตรวจสอบว่าเซิร์ฟเวอร์ได้รับไฟล์จริงทั้งหมดจากนั้นหน้าเว็บของฉันหยุดให้ข้อผิดพลาดแก่ฉัน

— Zarepheth
แหล่งที่มา

0

คุณต้องเพิ่ม JQuery js ก่อนเพิ่มไฟล์ bootstrap js เนื่องจาก BootStrap ใช้ฟังก์ชัน jqueries ดังนั้นตรวจสอบให้แน่ใจว่าได้โหลด jquery js ก่อนแล้วจึงบู๊ตไฟล์ 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
แหล่งที่มา

0

หากสิ่งนี้เกิดขึ้นกับอินทราเน็ต IE เท่านั้นให้ตรวจสอบการตั้งค่าความเข้ากันได้และยกเลิกการเลือก "แสดงอินทราเน็ตไซต์ในโหมดความเข้ากันได้"

IE -> การตั้งค่า -> ความเข้ากันได้

— Davut Gürbüz
แหล่งที่มา

0

บนเอกสารอย่างเป็นทางการ: 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 กับรหัส " "สคริปต์"[" node_modules / jQuery / อ / jquery.min.js " "node_modules / บูต / อ / js / bootstrap.min.js"]"

— AntWo

0

ฉันได้ลองวิธีการเกือบทั้งหมดข้างต้นแล้ว

ในที่สุดก็แก้ไขได้โดยรวมถึง

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

หลังจากโหลด staticfiles เช่น{% load staticfiles %}ใน base.html

— Kanika
แหล่งที่มา

0

หลังจากดิ้นรนกับปัญหานี้ฉันใช้สามขั้นตอน:

ใช้ jQuery เวอร์ชั่นใดก็ได้ระหว่าง 1.9.0 ถึง 3.0.0
ประกาศไฟล์ jQuery ก่อนประกาศไฟล์ Bootstrap
ประกาศทั้งสองไฟล์สคริปต์ที่ด้านล่างของแท็กมากกว่าใน<body></body> <head></head>สิ่งเหล่านี้ใช้ได้กับฉัน แต่อาจมีพฤติกรรมที่แตกต่างกันไปตามเบราว์เซอร์ที่คุณใช้

— Karisno1
แหล่งที่มา