TypeError: $(...).modal이 부트스트랩 모달을 사용하는 함수가 아닙니다.

TypeError: $(...).modal이 부트스트랩 모달을 사용하는 함수가 아닙니다.

다른 뷰의 HTML에 동적으로 삽입하려는 부트스트랩 2.32 모달이 있습니다.코드이그니터 2.1과 함께 일하고 있습니다.뷰에 부트스트랩 모달 부분 뷰를 동적으로 삽입하면 다음과 같은 내용이 있습니다.

<div id="modal_target"></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기능. 아닌 . modal 은 jQuery 가 아닌 bootstrap.js 에 정의되어 있습니다.하려면 jQuerymodal함수이므로 부트스트랩의 자바스크립트를 포함하기 전에 jQuery를 포함하는 것이 중요합니다.하려면 jQuery의 하기 전에 .modal기능. 는 보통 태그에서 합니다.나는 보통 머리글 태그에서 다음과 같이 합니다.

<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와 bootstrap을 연결한 후 jquery와 bootstrap의 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>

저는 이 문제를 이와 같이 사용하여 해결하였습니다.

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

합니다를 해 보세요.jquery하는 html을 통해 되지 않은 Ajax.제거한다.<script src="~/Scripts/jquery[ver].js"></script>n에AjaxUpdate/get_modal

또 다른 가능성은 당신이 포함한 다른 스크립트 중 하나가 JQuery를 포함하거나 $와 충돌하여 문제를 일으킬 수 있습니다.포함된 다른 스크립트를 제거하여 문제가 해결되는지 확인합니다.제 경우에는 불필요하게 하나의 코드를 몇 시간 동안 검색한 후 바이너리 검색 패턴의 스크립트를 제거하고 즉시 문제가 되는 스크립트를 발견했습니다.

제 경험으로는 아마도 jquery version(여러 버전 사용) 충돌에서 발생했을 것입니다. 아래와 같은 충돌 없는 방법으로 문제를 해결할 수 있습니다.

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

는 하였습니다에서 에서 이 하였습니다.resources\assets\js\bootstrap.js

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

로.

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

달려.

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

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

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

앱에서 module.ts.

더하다

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

당신의 색인에 있어요. html 시체 폐쇄 태그 바로 전에 말이죠.

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

이렇게 하면 Angular 프로젝트에서 'modal'과 '$'의 오류가 모두 제거됩니다.

저의 경우 레일 프레임워크를 사용하고 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를 옮기면 모든 것이 효과가 있었습니다.

제 react.js 어플리케이션에서는 다른 답변들이 저에게 맞지 않아 이를 위해 평이한 자바스크립트를 사용했습니다.

다음 솔루션이 작동했습니다.

1. modal/dialog의 닫기 부분(아래 예제에서 "myModalClose")에 ID를 지정합니다.

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

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

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

아마 jQuery를 사용해서 닫기 버튼에서 같은 클릭을 생성할 수 있을 것입니다.

도움이 되길 바랍니다.

저도 같은 문제가 있었습니다.변화하는

$.ajax(...)

로.

jQuery.ajax(...)

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

javascript 파일이 로드되기 전에 부트스트랩 모달이 호출될 수도 있는데, 이것이 나에게 일어난 일입니다.페이지 로드 시 함수를 호출했는데 이 오류가 발생했습니다.onload 이벤트를 통해 함수 호출을 통해 해결했습니다.

window.onload = function () {
  callYourFunctionOrAjaxHere();
}

버튼을 눌러야 할 것 같네요.

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

href 대신 data-target이 있어야 합니다.

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

반드시 그 모달 콘텐츠가 이미 로드되어 있습니다.

문제는 모달을 보여주는 것이 두 번 호출되는데, 하나는 ajax call에서 정상적으로 작동한다고 했는데, 모달이 정확하게 표시된다고 하셨는데, 오류는 아마도 해당 버튼의 init action과 함께 발생할 수 있는데, 그것은 모달을 처리해야 하는데, 이 동작은 그 때 모달이 로딩되지 않았기 때문에 실행될 수 없습니다.

언급URL : https://stackoverflow.com/questions/27064176/typeerror-modal-is-not-a-function-with-bootstrap-modal