Bootstrap ném Uncaught Error: JavaScript của Bootstrap yêu cầu jQuery [đã đóng]

172

Tôi đang cố gắng sử dụng Bootstrap để tạo giao diện cho chương trình. Tôi đã thêm jQuery 1.11.0 vào <head>thẻ và nghĩ rằng đó là như vậy, nhưng khi tôi khởi chạy trang web trong trình duyệt thì jQuery báo lỗi:

Uncaught Error: Bootstrap's JavaScript requires jQuery

Tôi đã thử sử dụng jQuery 1.9.0, tôi đã thử với các bản sao được lưu trữ trên một số CDN, nhưng tôi không thể làm cho nó hoạt động được. Bất cứ ai có thể chỉ ra những gì tôi đang làm sai?

— Munim Munna
nguồn

28

Bao gồm jQuery trước Bootstrap ...

— Adriano Repetti

Trong trường hợp của tôi, tôi đã cài đặt jquery trước khi bootstrap và sau đó, nó hoạt động tốt. Chỉ bao gồm trước khi bootstrap không giải quyết được lỗi.

— Stuti Verma

Tôi là trường hợp của tôi, thay vì thêm jquery trong phần chân trang (như trong mẫu bootstrap); Tôi đã thêm nó trong tiêu đề. Đã giải quyết vấn đề.

— Adeel Raza Azeemi

1

chỉ cần thêm

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

trước tập lệnh nhập bootstrap. Sao chép CDN mới nhất tại đây: cdnjs.com/lologists/jquery

— Tina Lee

371

Thử cái này

Thay đổi thứ tự của tập tin sẽ như dưới đây ..

<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
nguồn

85

Không làm việc cho tôi. Tôi có jQuery trước Bootstrap và vẫn nhận được lỗi!

— Xanh

2

đã làm việc nhưng có một thanh cuộn ngang ở phía dưới

— HimalayaCoder

1

Nếu nó không hoạt động từ điều này .. có thể jQuery được cài đặt qua Bower và do đó bạn có thể cần xem bower_components / jquery / dist / jquery.js .. phần "dist" là những gì tôi đã bỏ qua.

— Jax Cavalera

Làm việc cho tôi cho một dự án Django-Oscar. Lỗi này bắt đầu hiển thị ngoài màu xanh. Tôi cho rằng việc gây rối với một mã hoàn toàn không liên quan có thể thay đổi trình tự kết xuất và gây ra lỗi này.

— MadPhysicist

rõ ràng tôi đã không nhận thấy tôi có bootstrap.js bao gồm hai lần - lần đầu tiên là trước khi truy vấn

— JJ Roman

91

Nếu bạn đang ở trong môi trường Chỉ dành cho Trình duyệt , hãy sử dụng giải pháp của SridharR .

Nếu bạn đang ở trong môi trường Trình duyệt Node / CommonJS + (ví dụ: electron, nút-webkit, v.v.); Lý do cho lỗi này là logic xuất khẩu của jQuery trước tiên kiểm tra modulechứ không phải window:

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

Lưu ý rằng nó tự xuất qua module.exportstrong trường hợp này; nên jQueryvà $không được giao nhiệm vụ window.

Vì vậy, để giải quyết điều này, thay vì <script src="path/to/jquery.js"></script>;

Đơn giản chỉ cần tự gán nó bằng một requiretuyên bố:

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

LƯU Ý: Nếu ứng dụng điện tử của bạn không cần nodeIntegration, hãy đặt nó thành falseđể bạn sẽ không cần cách giải quyết này.

— Onur Yıldırım
nguồn

3

window.jQuery = window.$ = require('jquery');điều này làm việc cho tôi khi cố gắng lắp ráp một bản dựng brunch với jQuery 2 và Bootstrap 3. Chỉ mất vài giờ để tôi tìm thấy câu trả lời của bạn :(. Yêu cầu này có thay đổi trong các phiên bản sau của jQuery không?

— rikkit 14/8/2016

1

Tôi không biết nhưng vì đây không phải là lỗi nên tôi không nghĩ vậy. Nếu ứng dụng điện tử của bạn không cần nodeIntegration, hãy đặt nó thành falseđể bạn sẽ không cần cách giải quyết này.

— Onur Yıldırım

1

Bạn phải cài đặt jquery bằng cách npm install jquerykhông sử dụng Bower.

— âm mưu

1

Hữu ích để xem cách điện tử xử lý các thư viện khác với ứng dụng dựa trên cửa sổ

— jwknz

Tôi vẫn không hiểu điều đó, nhưng Laravel sử dụng cách tiếp cận tương tự: github.com/laravel/laravel/blob/v5.7.0/resource/js/ trộm

— Ryan

14

bạn nên tải jquery trước vì bootstrap sử dụng các tính năng của jquery. như thế này:

<!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
nguồn

7

Bạn cần thêm JQuery trước khi thêm 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
nguồn

4

Bạn đã cung cấp sai thứ tự cho JAVASCRIPT và BOOTSTRAP

theo quy ước bootstrap phải tuân theo định nghĩa tệp 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
nguồn

1

Trong trường hợp của tôi giải pháp là thực sự ngớ ngẩn, và lạ.

Mã bên dưới được điền trước bởi tệp _Layout.cshtml. (KHÔNG được viết bởi tôi)

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

Nhưng, khi tôi xác minh trong thư mục ScScript, jquery-1.10.2.min.js thậm chí không có sẵn. Do đó, mã được thay thế như dưới đây trong đó jquery-1.9.1.min.js là một tệp hiện có:

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

— Ashok kumar
nguồn

1

Tôi đang sử dụng NodeJS và gặp lỗi tương tự. Giống như các câu trả lời khác, vấn đề cũng là do JQuery cần được tải trước Bootstrap; Tuy nhiên, vì những đặc điểm NodeJS, sự thay đổi này phải được aplied trong tập tin pipeline.js .

Sự thay đổi trong pipe.js là như thế này:

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

Tôi cũng đang sử dụng grunt để trợ giúp và nó tự động thay đổi thứ tự trong trang html chính:

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

Hy vọng nó giúp! Bạn đã không nói môi trường của bạn là gì, vì vậy tôi quyết định đăng câu trả lời này.

— Ernani
nguồn

1

Nếu bạn đang sử dụng require.jshơn cần thêm window.$ = window.jQuery = require('jquery')vào app.js

HOẶC bạn có thể thực hiện tải tệp phụ thuộc sau khi tải tệp gốc .. chẳng hạn như khái niệm bên dưới

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

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

Mã trên cho thấy bootstrapphụ thuộc vào Jqueryvì vậy tôi đã thêm vào shimvà làm cho nó phụ thuộc

— SantoshK
nguồn

0

Nếu mã của bạn có vẻ tốt, hãy xác minh rằng jQuery đã tải thành công vào máy chủ của bạn. Trong trường hợp của tôi, các tệp jQuery đã được IDE của tôi xuất bản lên máy chủ, nhưng máy chủ web chỉ có sơ khai tệp 0 KB. Không có nội dung, máy chủ không thể phục vụ tệp cho trình duyệt.

Sau khi xuất bản lại tệp và xác minh rằng máy chủ thực sự đã nhận được toàn bộ tệp, sau đó trang web của tôi đã ngừng cung cấp cho tôi lỗi.

— Zarepheth
nguồn

0

Bạn cần thêm jQuery js trước khi thêm tệp js bootstrap, vì BootStrap sử dụng chức năng jqueries. Vì vậy, hãy chắc chắn tải js jquery js đầu tiên và sau đó bootstap tập tin 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
nguồn

0

Nếu điều này chỉ xảy ra mạng nội bộ IE, hãy kiểm tra cài đặt tương thích và bỏ chọn "Hiển thị trang web mạng nội bộ ở chế độ Tương thích".

IE -> cài đặt -> tương thích

— Davut Gübüz
nguồn

0

Trên các tài liệu chính thức: 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>

— Souio Souza
nguồn

1

Tôi đã sửa nó trên angular.json với mã "" scripts ": [" node_modules / jquery / dist / jquery.min.js "," node_modules / bootstrap / dist / js / bootstrap.min.js "]"

— AntWo

0

Tôi đã thử gần như tất cả các phương pháp trên.

Cuối cùng đã sửa nó bằng cách bao gồm

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

ngay sau khi tải staticfiles tức là {% load staticfiles %}trong base.html

— kanika
nguồn

0

Sau khi vật lộn với vấn đề này, tôi đã thực hiện ba bước:

Sử dụng các phiên bản jQuery ở bất cứ đâu giữa 1.9.0 và 3.0.0
Khai báo tệp jQuery trước khi khai báo tệp Bootstrap
Khai báo hai tệp script này ở dưới cùng của <body></body>thẻ chứ không phải trong <head></head>. Chúng hoạt động với tôi nhưng có thể có những hành vi khác nhau dựa trên trình duyệt bạn đang sử dụng.

— Karisno1
nguồn