부트스트랩에서 발견되지 않은 오류가 발생함: 부트스트랩의 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.9.0과 3.0.0 사이의 jQuery 버전 사용
- 부트스트랩 파일을 선언하기 전에 jQuery 파일 선언
- 맨 아래에 있는 이 두 스크립트 파일을 선언합니다.
<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-->설정-->호환성
저는 위의 방법을 거의 모두 시도했습니다.
최종적으로 그것을 포함하여 고쳤습니다.
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
'programing' 카테고리의 다른 글
Oracle 데이터베이스:BLOB 읽는 법? (0) | 2023.07.29 |
---|---|
MySQL에서 varchar에 대해 255개가 아닌 다른 길이를 선택해야 하는 이유는 무엇입니까? (0) | 2023.07.29 |
왜 parseInt(8,3) == NaN과 parseInt(16,3) == 1일까요? (0) | 2023.07.29 |
파일 또는 어셈블리 'Oracle'을 로드할 수 없습니다.DataAccess' 또는 해당 종속성 중 하나입니다.잘못된 형식의 프로그램을 로드하려고 했습니다. (0) | 2023.07.29 |
jquery 중지 하위 이벤트 트리거링 (0) | 2023.07.29 |