[javascript] 부트 스트랩 모달 : 함수가 아닙니다.

내 페이지에 모달이 있습니다. Windows가로드 될 때 호출하려고하면 다음과 같은 오류가 콘솔에 인쇄됩니다.

$(...).modal is not a function

이것은 내 모달 HTML입니다.

<div class="modal fade" id="prizePopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">
                This Modal title
            </h4>
        </div>
        <div class="modal-body">
            Add some text here
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">
                Submit changes
            </button>
        </div>
    </div>
</div>

<script type="text/javascript" src="js/bootstrap.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

그리고 이것은 창이로드 될 때 함께 실행할 JavaScript입니다.

<script type="text/javascript">
$(window).load(function() {
    $('#prizePopup').modal('show');
});
</script>

이 문제를 어떻게 해결할 수 있습니까?

답변

스크립트 순서에 문제가 있습니다. 다음 순서로로드하십시오.

<!-- jQuery -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- BS JavaScript -->
<script type="text/javascript" src="js/bootstrap.js"></script>
<!-- Have fun using Bootstrap JS -->
<script type="text/javascript">
$(window).load(function() {
    $('#prizePopup').modal('show');
});
</script>

왜 이래? Bootstrap JS는 jQuery에 의존 하기 때문에 :

플러그인 종속성

일부 플러그인 및 CSS 구성 요소는 다른 플러그인에 의존합니다. 플러그인을 개별적으로 포함하는 경우 문서에서 이러한 종속성을 확인해야합니다. 또한 모든 플러그인은 jQuery에 의존합니다 (즉 , 플러그인 파일 앞에 jQuery가 포함되어야 함 ).

답변

코드에서 jQuery가 두 번 이상 선언 된 경우에도이 경고가 표시 될 수 있습니다. 두 번째 jQuery 선언은 bootstrap.js가 올바르게 작동하지 못하게합니다.

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
...
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

답변

문제는 jQuery 인스턴스가 두 번 이상 있기 때문입니다. jQuery의 다중 인스턴스로 많은 파일을 사용하는 경우주의하십시오. jQuery 인스턴스 하나만 남겨두면 코드가 작동합니다.

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

답변

jQuery가 첫 번째 여야합니다.

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>

답변

TypeError의 원인 : $ (…) .modal은 함수가 아닙니다 :

스크립트가 잘못된 순서로로드됩니다.
여러 jQuery 인스턴스

해결책 :

스크립트가 아직 도달하지 않은 요소에 액세스하려고하면 오류가 발생합니다. 부트 스트랩은 jQuery에 의존하므로 먼저 jQuery를 참조해야합니다. 따라서 jquery.min.js를 호출 한 다음 bootstrap.min.js를 호출해야합니다. 또한 부트 스트랩 모달 오류는 실제로 모달 함수를 호출하기 전에 부트 스트랩의 javascript를 포함하지 않은 결과입니다. 모달은 jQuery가 아닌 bootstrap.js에 정의되어 있습니다. 따라서 스크립트는 이러한 방식으로 포함되어야합니다.
```
   <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
   <script type="text/javascript" src="js/bootstrap.js"></script>
```
jQuery의 여러 인스턴스가있는 경우 두 번째 jQuery 선언은 bootstrap.js가 올바르게 작동하지 못하게합니다. 따라서 jQuery.noConflict();모달 팝업을 호출하기 전에 사용
하십시오.
```
jQuery.noConflict();
$('#prizePopup').modal('show');
```
jQuery를 이벤트 별칭처럼 .load, .unload또는 .errorjQuery를 1.8부터 사용되지 않습니다.
```
$(window).on('load', function(){ 
      $('#prizePopup').modal('show');
});
```
또는 모달 팝업을 직접 열어보십시오.
```
$('#prizePopup').on('shown.bs.modal', function () {
      ...
});
```

답변

스크립트 순서 변경

부트 스트랩은 jquery 플러그인이므로 실행하려면 Jquery가 필요합니다.

답변

import 문을 변경했습니다. 에서

import * as $ from 'jquery';

에:

declare var $ : any;