programing

부트스트랩에서 발견되지 않은 오류가 발생함: 부트스트랩의 JavaScript에 jQuery가 필요함

css3 2023. 7. 29. 08:47

부트스트랩에서 발견되지 않은 오류가 발생함: 부트스트랩의 JavaScript에 jQuery가 필요함

나는 부트스트랩을 사용하여 프로그램의 인터페이스를 만들려고 합니다.jQuery 1.11.0을 에 추가했습니다.<head>태그를 지정하고 이상이라고 생각했지만 브라우저에서 웹 페이지를 실행하면 jQuery가 다음 오류를 보고합니다.

Uncaught Error: Bootstrap's JavaScript requires jQuery

jQuery 1.9.0을 사용해 보고 여러 CDN에서 호스팅되는 복사본을 사용해 보았지만 작동할 수 없습니다.누가 내가 뭘 잘못하고 있는지 지적해 줄 수 있습니까?

사용해 보세요.

JS 파일의 순서를 변경합니다.아래와 같아야 합니다.

<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의 솔루션을 사용합니다.

노드/공통에 있는 경우JS + 브라우저 환경(예: 전자, 노드 웹킷 등)); 이 오류의 원인은 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 기능을 사용하므로 먼저 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를 추가해야 합니다.

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

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

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>

저의 경우 해결책은 정말 어리석고 이상합니다.

아래 코드는 _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>

NodeJS를 사용하고 있는데 같은 오류가 발생했습니다.다른 답변과 마찬가지로 문제는 JQuery가 부트스트랩 전에 로드되어야 했기 때문이기도 했지만 노드 때문이었습니다.JS 특성, 이 변경 사항은 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',
];

저는 또한 도움을 주기 위해 그룬트를 사용하고 있는데, 그것은 자동으로 메인 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-->

도움이 되길 바랍니다!당신이 당신의 환경이 무엇인지 말하지 않아서, 저는 이 답변을 올리기로 결정했습니다.

공식 문서: 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>

사중인경우를 .require.js추가할 필요 이상으로window.$ = window.jQuery = require('jquery')jsapp.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그리고 그것을 의존적으로 만듭니다.

이 문제와 씨름한 후에 저는 세 가지 단계를 밟았습니다.

  1. 1.9.0과 3.0.0 사이의 jQuery 버전 사용
  2. 부트스트랩 파일을 선언하기 전에 jQuery 파일 선언
  3. 맨 아래에 있는 이 두 스크립트 파일을 선언합니다.<body></body>가 태그<head></head>이것들은 나에게 효과가 있었지만 당신이 사용하는 브라우저에 따라 다른 동작이 있을 수 있습니다.

코드가 양호한 경우 jQuery가 서버에 성공적으로 로드되었는지 확인합니다.제 경우, jQuery 파일은 제 IDE에 의해 서버에 게시되었지만 웹 서버에는 0KB 파일 스텁만 있었습니다.콘텐츠가 없으면 서버가 파일을 브라우저에 제공하지 못했습니다.

파일을 다시 게시하고 서버가 실제로 전체 파일을 수신했는지 확인한 후, 웹 페이지에서 오류 메시지가 표시되지 않습니다.

부트스트랩은 jquery 함수를 사용하기 때문에 부트스트랩 js 파일을 추가하기 전에 jQuery js를 추가해야 합니다.따라서 먼저 jquery js를 로드한 다음 bootstap 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-->설정-->호환성

enter image description here

저는 위의 방법을 거의 모두 시도했습니다.

최종적으로 그것을 포함하여 고쳤습니다.

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

를 들어 적파로드직후한을일정▁just직후▁after▁the▁loading.{% load staticfiles %}

언급URL : https://stackoverflow.com/questions/22658015/bootstrap-throws-uncaught-error-bootstraps-javascript-requires-jquery