TypeError: $ (…) .modal không phải là một hàm với Bootstrap Modal

Tôi có phương thức bootstrap 2.32 mà tôi đang cố gắng chèn động vào HTML của một chế độ xem khác. Tôi đang làm việc với Codeigniter 2.1. Sau khi Chèn động một phần theo phương thức bootstrap vào một khung nhìn , tôi có:

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

làm div đích để chèn. Tôi có một nút trong chế độ xem của mình trông giống như:

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

JS của tôi có:

$.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();
       }
    }
});

Nút của chế độ xem chính là:

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

Đây là những gì tôi muốn lưu trữ riêng ở dạng xem một phần:

<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>

Khi tôi nhấp vào nút, phương thức được chèn chính xác, nhưng tôi gặp lỗi sau:

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

Làm thế nào tôi có thể sửa lỗi này?

tôi chỉ muốn nhấn mạnh những gì mwebber đã nói trong bình luận:

cũng kiểm tra xem jQuery không được bao gồm hai lần

:)

đó là vấn đề đối với tôi

Lỗi này thực sự là kết quả của việc bạn không bao gồm javascript của bootstrap trước khi gọi modalhàm. Phương thức được định nghĩa trong bootstrap.js không phải jQuery. Cũng cần lưu ý rằng bootstrap thực sự cần jQuery để xác định modalhàm, vì vậy điều quan trọng là bạn phải bao gồm jQuery trước khi bao gồm javascript của bootstrap. Để tránh lỗi, chỉ cần đảm bảo bao gồm jQuery rồi đến javascript của bootstrap trước khi bạn gọi modalhàm. Tôi thường làm như sau trong thẻ tiêu đề của mình:

<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>

Sau khi liên kết jquery và bootstrap, hãy viết mã của bạn ngay bên dưới các thẻ Script của jquery và bootstrap.

$(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>

Kiểm tra xem jquerythư viện không có trong html tải qua Ajax.remove <script src="~/Scripts/jquery[ver].js"></script>trongAjaxUpdate/get_modal

Một khả năng khác là một trong những tập lệnh khác mà bạn bao gồm đang gây ra sự cố bằng cách bao gồm cả JQuery hoặc xung đột với $. Hãy thử xóa các tập lệnh đi kèm khác của bạn và xem liệu nó có khắc phục được sự cố không. Trong trường hợp của tôi, sau nhiều giờ tìm kiếm không cần thiết một mã của mình, tôi đã xóa các tập lệnh theo mẫu tìm kiếm nhị phân và phát hiện ra tập lệnh vi phạm ngay lập tức.

Tôi đã giải quyết vấn đề này trong phản ứng bằng cách sử dụng nó như thế này.

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

Chạy

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

trong dự án để thêm các kiểu jquery trong Dự án Angular của bạn. Sau đó bao gồm

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

trong app.module.ts của bạn

Thêm vào

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

trong index.html của bạn ngay trước thẻ đóng nội dung.

Và nếu bạn đang chạy Angular 2-7, hãy bao gồm "jquery" trong trường loại của tệp tsconfig.app.json.

Thao tác này sẽ xóa tất cả lỗi 'modal' và '$' trong dự án Angular của bạn.

Theo kinh nghiệm của tôi, hầu hết có thể nó đã xảy ra với xung đột phiên bản jquery (sử dụng nhiều phiên bản), để giải quyết vấn đề, chúng tôi có thể sử dụng phương pháp không xung đột như bên dưới.

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

Tôi đã giải quyết vấn đề này trong Laravel bằng cách sửa đổi dòng bên dưới trong resources\assets\js\bootstrap.js

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

đến

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

Trong trường hợp của tôi, tôi sử dụng khung công tác rails và yêu cầu jQuery hai lần. Tôi nghĩ rằng đó là một lý do có thể.

Trước tiên, bạn có thể kiểm tra tệp ứng dụng / tài sản / ứng dụng.js. Nếu jquery và bootstrap-chainckets xuất hiện, thì không cần yêu cầu thư viện thứ hai. Tệp phải tương tự như sau:

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

Sau đó, kiểm tra app / views / layouts / application.html.erb và xóa tập lệnh yêu cầu jquery. Ví dụ:

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

Tôi nghĩ rằng đôi khi khi người mới sử dụng nhiều ví dụ mã hướng dẫn sẽ gây ra vấn đề này.

Đối với tôi, tôi đã có //= require jquerysau //= require bootstrap. Khi tôi di chuyển jquery trước bootstrap, mọi thứ đều hoạt động.

Tôi gặp vấn đề tương tự. Thay đổi

$.ajax(...)

đến

jQuery.ajax(...)

đã không làm việc. Nhưng sau đó tôi thấy rằng jQuery đã được đưa vào hai lần và việc xóa một trong số chúng đã khắc phục được sự cố.

Các câu trả lời khác không phù hợp với tôi trong ứng dụng react.js của tôi, vì vậy tôi đã sử dụng JavaScript thuần túy cho việc này.

Giải pháp dưới đây đã hoạt động:

1. Cung cấp một id cho phần đóng của phương thức / hộp thoại ("myModalClose" trong ví dụ dưới đây)

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

2. Tạo sự kiện nhấp chuột vào nút đóng ở trên, sử dụng id đó:

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

Có thể bạn có thể tạo ra cùng một lần nhấp vào nút đóng, sử dụng jQuery.

Hy vọng rằng sẽ giúp.

Tôi đoán bạn nên sử dụng trong nút của mình

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

thay vì href phải có data-target

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

chỉ cần chắc chắn, nội dung phương thức đó đã được tải

Tôi nghĩ vấn đề là, phương thức hiển thị được gọi hai lần, một trong lệnh gọi ajax, hoạt động tốt, bạn đã nói phương thức được hiển thị chính xác, nhưng lỗi có thể xảy ra với hành động init trên nút đó, điều đó sẽ xử lý phương thức, hành động này không thể thực hiện được, bởi vì modal không được tải tại thời điểm đó.