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

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

Uncaught Error: Bootstrap's JavaScript requires jQuery

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

ลองสิ่งนี้

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

<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/wow.min.js"></script>

หากคุณอยู่ในสภาพแวดล้อมที่มีเฉพาะเบราว์เซอร์ให้ใช้โซลูชันของ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ดังนั้นคุณจะไม่ต้องการวิธีแก้ปัญหานี้

คุณควรโหลด 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>

คุณต้องเพิ่ม JQuery ก่อนที่จะเพิ่ม bootstrap-

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

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

คุณระบุลำดับที่ไม่ถูกต้องสำหรับ 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>

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

โค้ดด้านล่างมีการเติมข้อมูลล่วงหน้าโดยไฟล์ _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>

ฉันใช้ 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-->

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

หากคุณกำลังใช้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และทำให้มันขึ้นอยู่กับ

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

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

คุณต้องเพิ่ม 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>

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

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

บนเอกสารอย่างเป็นทางการ: 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>

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

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

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

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

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

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