부트 스트랩에 잡히지 않는 오류가 발생합니다. 부트 스트랩의 JavaScript에는 jQuery가 필요합니다.

172

Bootstrap을 사용하여 프로그램의 인터페이스를 만들려고합니다. jQuery 1.11.0을 <head>태그에 추가 하고 그 점을 생각했지만 브라우저에서 웹 페이지를 시작하면 jQuery가 오류를보고합니다.

Uncaught Error: Bootstrap's JavaScript requires jQuery

jQuery 1.9.0을 사용하려고 시도했지만 여러 CDN에서 호스팅되는 사본으로 시도했지만 작동하지 않습니다. 아무도 내가 뭘 잘못하고 있는지 지적 할 수 있습니까?

— 무님 문나
소스

28

부트 스트랩 전에 jQuery 포함 ...

— Adriano Repetti 10

필자의 경우 부트 스트랩 전에 jquery를 설치 한 다음 제대로 작동했습니다. 부트 스트랩 전만 포함해도 오류가 해결되지 않았습니다.

— Stuti Verma

필자의 경우 바닥 글에 jquery를 추가하는 대신 (부트 스트랩 템플릿과 동일) 헤더에 추가했습니다. 문제를 해결했습니다.

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

부트 스트랩 가져 오기 스크립트 앞에 추가하십시오 . 최신 CDN을 여기에 복사하십시오 : cdnjs.com/libraries/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>

— 스리 다르 R
소스

85

나를 위해 작동하지 않습니다. 부트 스트랩 전에 jQuery가 있고 어쨌든 오류가 발생합니다!

— 녹색

2

일을하지만 하단의 가로 스크롤 있어요

— HimalayanCoder

1

그것이 작동하지 않는다면 .... jQuery가 Bower를 통해 설치되어 있기 때문에 bower_components / jquery / dist / jquery.js 아래에서 "간단한"부분을보아야 할 수도 있습니다.

— Jax Cavalera

Django-Oscar 프로젝트에서 저를 위해 일했습니다. 이 오류는 파란색으로 표시되기 시작합니다. 완전히 관련이없는 코드로 엉망이 렌더링 시퀀스를 변경 하고이 오류를 트리거 할 수 있다고 가정합니다.

— MadPhysicist

bootstrap.js가 두 번 포함 된 것을 눈치 채지 못했습니다. 처음 쿼리가 시작되기 전에

— JJ Roman

91

당신이에 있다면 브라우저 전용 환경 , 사용 SridharR 의 솔루션입니다.

당신이에 있다면 노드 / CommonJS + 브라우저 환경 (예를 들어 전자, 노드 웹킷, 등); 이 오류의 원인은 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.

— 오 누르 일림
소스

3

window.jQuery = window.$ = require('jquery');이것은 단지 :(하지만 답을 찾기 위해 나에게 몇 시간이 걸렸다 내가 jQuery를 2 부트 스트랩 3와 함께 브런치 빌드를 조립하려고 근무합니까 jQuery를 이후 버전이 요구 사항 변화.?

— rikkit

1

나는 모르지만 이것이 버그가 아니기 때문에 그렇게 생각하지 않습니다. 전자 앱에 필요하지 않은 경우이 해결 방법이 필요하지 않도록 nodeIntegration설정하십시오 false.

— Onur Yıldırım

1

npm install jquerybower를 사용 하지 않고 jquery를 설치해야합니다 .

— syodage

1

전자가 윈도우 기반 앱과 다른 라이브러리를 다루는 방법을 보는 데 유용

— jwknz

나는 아직도 그것을 이해하지 못하지만, 라 라벨은 같은 접근법을 사용한다 : github.com/laravel/laravel/blob/v5.7.0/resources/js/…

— Ryan

14

부트 스트랩은 jquery 기능을 사용하기 때문에 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를 추가해야합니다.

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

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

— 비벡 판다
소스

4

JAVASCRIPT 및 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>

— 모 히트 싱
소스

1

제 경우에는 해결책이 정말 어리 석고 이상합니다.

아래 코드는 _Layout.cshtml 파일로 미리 채워져 있습니다. (나에 의해 작성되지 않음)

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

그러나 Scripts 폴더에서 확인하면 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>

— 아 ok 쿠마르
소스

1

NodeJS를 사용하고 있으며 동일한 오류가 발생했습니다. 다른 답변과 마찬가지로, 문제는 JQuery를 부트 스트랩 전에로드해야했기 때문입니다. 그러나 NodeJS 특성으로 인해이 변경 사항은 pipeline.js 파일에 적용되어야했습니다 .

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

또한 grunt를 사용하여 도움을 얻고 있으며 기본 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-->

그것이 도움이되기를 바랍니다! 당신은 당신의 환경이 무엇인지 말하지 않았 으므로이 답변을 게시하기로 결정했습니다.

— 에르 나니
소스

1

app.js require.js에 추가 해야하는 것보다 사용중인 경우 window.$ = window.jQuery = require('jquery')

또는 아래 개념과 같이 상위 파일이로드 된 후 종속 파일로드를 만들 수 있습니다.

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에서 서버로 게시되었지만 웹 서버에는 0KB 파일 스텁 만 있습니다. 내용이 없으면 서버가 파일을 브라우저에 제공하지 못했습니다.

파일을 다시 게시하고 서버가 실제로 전체 파일을 받았는지 확인한 후 웹 페이지에서 오류가 발생하지 않았습니다.

— 자레 페스
소스

0

BootStrap은 jqueries 기능을 사용하므로 부트 스트랩 js 파일을 추가하기 전에 JQuery js를 추가해야합니다. 따라서 먼저 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>

— 자니 데방
소스

0

이 문제가 IE 인트라넷에만 발생하면 호환성 설정을 확인하고 "호환 모드에서 인트라넷 사이트 표시"를 선택 취소하십시오.

IE-> 설정-> 호환성

— 다 부트 구 뷔즈
소스

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

코드 ""scripts "를 사용하여 angular.json에서 수정했습니다 : ["node_modules / jquery / dist / jquery.min.js ","node_modules / bootstrap / dist / js / bootstrap.min.js "]"

— AntWo

0

위의 거의 모든 방법을 시도했습니다.

마지막으로 포함하여 고정

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

정적 파일을로드 한 직후 (예 : {% load staticfiles %}base.html)

— 카니 카
소스

0

이 문제로 어려움을 겪은 후 세 단계를 거쳤습니다.

1.9.0에서 3.0.0 사이의 jQuery 버전을 사용하십시오.
부트 스트랩 파일을 선언하기 전에 jQuery 파일을 선언하십시오.
이 두 스크립트 파일을 <body></body>태그가 아닌 태그 하단에 선언 하십시오 <head></head>. 이들은 나를 위해 일했지만 사용중인 브라우저에 따라 다른 동작이있을 수 있습니다.

— 카리스 노 1
소스