TypeError : $ (…) .modal은 부트 스트랩 Modal이있는 함수가 아닙니다.

다른 뷰의 HTML에 동적으로 삽입하려는 부트 스트랩 2.32 모달이 있습니다. 저는 Codeigniter 2.1을 사용하고 있습니다. 뷰에 부트 스트랩 모달 부분 뷰를 동적으로 삽입 한 후 다음 과 같이합니다.

<div id="modal_target"></div>

삽입 할 대상 div로. 내보기에 다음과 같은 버튼이 있습니다.

     <a href="#message" class="btn btn-large btn-info" data-action="Message" data-toggle="tab">Message</a>

내 JS에는 다음이 있습니다.

$.ajax({
    type    : 'POST', 
    url     : "AjaxUpdate/get_modal",
    cache   : false,
    success : function(data){ 
       if(data){
            $('#modal_target').html(data);

            //This shows the modal
            $('#form-content').modal();
       }
    }
});

기본보기의 버튼은 다음과 같습니다.

<div id="thanks"><p><a data-toggle="modal" href="#form-content" class="btn btn-primary btn-large">Modal powers, activate!</a></p></div>

다음은 부분보기로 별도로 저장하려는 내용입니다.

<div id="form-content" class="modal hide fade in" style="display: none;">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>Send me a message</h3>
    </div>
    <div class="modal-body">
        <form class="contact" name="contact">
             <fieldset>

               <!-- Form Name -->

            <legend>modalForm</legend>

            <!-- Text input-->
            <div class="control-group">
              <label class="control-label" for="user">User</label>
              <div class="controls">
                <input id="user" name="user" type="text" placeholder="User" class="input-xlarge" required="">
                <p class="help-block">help</p>
              </div>
            </div>

            <!-- Text input-->
            <div class="control-group">
              <label class="control-label" for="old">Old password</label>
              <div class="controls">
                <input id="old" name="old" type="text" placeholder="placeholder" class="input-xlarge">
                <p class="help-block">help</p>
              </div>
            </div>

            <!-- Text input-->
            <div class="control-group">
              <label class="control-label" for="new">New password</label>
              <div class="controls">
                <input id="new" name="new" type="text" placeholder="placeholder" class="input-xlarge">
                <p class="help-block">help</p>
              </div>
            </div>

            <!-- Text input-->
            <div class="control-group">
              <label class="control-label" for="repeat">Repeat new password</label>
              <div class="controls">
                <input id="repeat" name="repeat" type="text" placeholder="placeholder" class="input-xlarge">
                <p class="help-block">help</p>
              </div>
            </div>



                </fieldset>
        </form>
    </div>


    <div class="modal-footer">
        <input class="btn btn-success" type="submit" value="Send!" id="submit">
        <a href="#" class="btn" data-dismiss="modal">Nah.</a>
    </div>
</div>

버튼을 클릭하면 모달이 올바르게 삽입되지만 다음과 같은 오류가 발생합니다.

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

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

mwebber 가 코멘트에서 말한 것을 강조하고 싶습니다 .

또한 jQuery가 두 번 포함되지 않았는지 확인하십시오.

:)

그것은 나에게 문제였다

이 오류는 실제로 modal함수 를 호출하기 전에 부트 스트랩의 자바 스크립트를 포함하지 않은 결과입니다 . 모달은 jQuery가 아닌 bootstrap.js에 정의되어 있습니다. 부트 스트랩은 실제로 modal함수 를 정의하기 위해 jQuery가 필요 하므로 부트 스트랩의 javascript를 포함하기 전에 jQuery를 포함하는 것이 중요합니다. 오류를 방지하려면 modal함수 를 호출하기 전에 jQuery를 포함하고 부트 스트랩의 자바 스크립트를 포함해야 합니다. 일반적으로 헤더 태그에서 다음을 수행합니다.

<header>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="/path/to/bootstrap/js/bootstrap.min.js"></script>
</header>

jquery와 부트 스트랩을 연결 한 후 jquery 및 부트 스트랩의 Script 태그 바로 아래에 코드를 작성합니다.

$(document).ready(function($) {
  $("#div").on("click", "a", function(event) {
    event.preventDefault();
    jQuery.noConflict();
    $('#myModal').modal('show');

  });
});

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

그 확인 jqueryHTML에 포함되지 않은 라이브러리를 그 통해 부하 Ajax.remove <script src="~/Scripts/jquery[ver].js"></script>에AjaxUpdate/get_modal

또 다른 가능성은 포함 된 다른 스크립트 중 하나가 JQuery를 포함하거나 $와 충돌하여 문제를 일으키는 것입니다. 포함 된 다른 스크립트를 제거하고 문제가 해결되는지 확인하십시오. 제 경우에는 불필요하게 하나의 코드를 검색 한 후 이진 검색 패턴의 스크립트를 제거하고 문제가되는 스크립트를 즉시 발견했습니다.

나는 이것을 사용하여 반응 으로이 문제를 해결했습니다.

window.$('#modal-id').modal();

운영

npm i @types/jquery
npm install -D @types/bootstrap

프로젝트에서 Angular 프로젝트에 jquery 유형을 추가합니다. 그 후 포함

import * as $ from "jquery";
import * as bootstrap from "bootstrap";

app.module.ts에서

더하다

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

index.html에서 본문 닫는 태그 바로 앞에 있습니다.

Angular 2-7을 실행하는 경우 tsconfig.app.json 파일의 types 필드에 "jquery"를 포함합니다.

그러면 Angular 프로젝트에서 '모달'과 '$'의 모든 오류가 제거됩니다.

내 경험상 대부분의 경우 jquery 버전 (다중 버전 사용) 충돌이 발생했을 것입니다. 문제를 해결하기 위해 아래와 같은 충돌 방지 방법을 사용할 수 있습니다.

jQuery.noConflict();
(function( $ ) {
  $(function() {
    // More code using $ as alias to jQuery
    $('button').click(function(){
        $('#modalID').modal('show');
    });
  });
})(jQuery);

아래 줄을 수정하여 Laravel 에서이 문제를 해결했습니다. resources\assets\js\bootstrap.js

window.$ = window.jQuery = require('jquery/dist/jquery.slim');

에

window.$ = window.jQuery = require('jquery/dist/jquery');

제 경우에는 rails 프레임 워크를 사용하고 jQuery가 두 번 필요합니다. 가능한 이유라고 생각합니다.

먼저 app / assets / application.js 파일을 확인할 수 있습니다. jquery 및 bootstrap-sprockets가 나타나면 두 번째 라이브러리 요구 사항이 필요하지 않습니다. 파일은 다음과 유사해야합니다.

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .

그런 다음 app / views / layouts / application.html.erb를 확인하고 jquery가 필요한 스크립트를 제거하십시오. 예를 들면 :

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

초보자가 여러 튜토리얼 코드 예제를 사용하면 때때로이 문제가 발생할 것이라고 생각합니다.

나를 위해, 나는 한 //= require jquery후 //= require bootstrap. 부트 스트랩 전에 jquery를 이동하면 모든 것이 작동했습니다.

나는 같은 문제가 있었다. 바꾸다

$.ajax(...)

에

jQuery.ajax(...)

작동하지 않았다. 그러나 jQuery가 두 번 포함되어 있고 그중 하나를 제거하면 문제가 해결되었습니다.

다른 답변은 내 react.js 응용 프로그램에서 나를 위해 작동하지 않으므로 일반 JavaScript를 사용했습니다.

아래 솔루션이 작동했습니다.

1. 모달 / 대화 상자의 닫기 부분에 대한 ID를 제공합니다 (아래 예에서 "myModalClose").

<span>
   className="close cursor-pointer"
   data-dismiss="modal"
   aria-label="Close"
                     id="myModalClose"
>
...

2. 해당 ID를 사용하여 위의 닫기 버튼에 대한 클릭 이벤트를 생성합니다.

   document.getElementById("myModalClose").click();

아마도 jQuery를 사용하여 닫기 버튼을 동일한 클릭으로 생성 할 수 있습니다.

도움이 되었기를 바랍니다.

버튼에 사용해야 할 것 같아요

<a data-toggle="modal" href="#form-content"    

href 대신 데이터 타겟 이 있어야합니다.

<a data-toggle="modal" data-target="#form-content"    

모달 콘텐츠가 이미로드되어 있는지 확인하세요.

문제는 모달 표시가 두 번 호출되고 하나는 ajax 호출에서 잘 작동한다는 것입니다. 모달이 올바르게 표시되었다고 말했지만 모달을 처리 해야하는 해당 버튼에 대한 초기화 작업과 함께 오류가 발생할 수 있습니다.이 작업은 실행할 수 없습니다. 당시 모달이로드되지 않았기 때문입니다.