Bootstrap modal: không phải là một hàm

Tôi có một phương thức trong trang của mình. Khi tôi cố gắng gọi nó khi cửa sổ tải, nó sẽ báo lỗi cho bảng điều khiển cho biết:

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

Đây là HTML phương thức của tôi:

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

Và đây là JavaScript của tôi để chạy nó khi một cửa sổ được tải:

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

Làm cách nào để khắc phục sự cố này?

Bạn gặp sự cố trong thứ tự tập lệnh. Tải chúng theo thứ tự sau:

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

Tại sao là cái này? Bởi vì Bootstrap JS phụ thuộc vào jQuery :

Sự phụ thuộc của plugin

Một số plugin và thành phần CSS phụ thuộc vào các plugin khác. Nếu bạn bao gồm các plugin riêng lẻ, hãy đảm bảo kiểm tra các phần phụ thuộc này trong tài liệu. Cũng lưu ý rằng tất cả các plugin phụ thuộc vào jQuery (điều này có nghĩa là jQuery phải được bao gồm trước các tệp plugin ).

Cảnh báo này cũng có thể được hiển thị nếu jQuery được khai báo nhiều lần trong mã của bạn. Khai báo jQuery thứ hai ngăn bootstrap.js hoạt động chính xác.

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

Vấn đề là do có các phiên bản jQuery nhiều hơn một lần. Hãy cẩn thận nếu bạn đang sử dụng nhiều tệp với nhiều phiên bản của jQuery. Chỉ cần để lại 1 phiên bản jQuery và mã của bạn sẽ hoạt động.

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

jQuery phải là cái đầu tiên:

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

Nguyên nhân gây ra lỗi TypeError: $ (…) .modal không phải là một hàm:

1. Tập lệnh được tải không đúng thứ tự.
2. Nhiều phiên bản jQuery

Các giải pháp:

1. Trong trường hợp, nếu tập lệnh cố gắng truy cập vào một phần tử chưa được tiếp cận thì bạn sẽ gặp lỗi. Bootstrap phụ thuộc vào jQuery, vì vậy jQuery phải được tham chiếu trước. Vì vậy, bạn phải được gọi là jquery.min.js và sau đó là bootstrap.min.js và hơn nữa lỗi bootstrap Modal 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 hàm modal. Phương thức được định nghĩa trong bootstrap.js chứ không phải trong jQuery. Vì vậy, kịch bản nên được đưa vào theo cách này

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

2. Trong trường hợp nếu có nhiều trường hợp jQuery, thì khai báo jQuery thứ hai sẽ ngăn bootstrap.js hoạt động chính xác. vì vậy hãy tận dụng jQuery.noConflict();trước khi gọi cửa sổ bật lên phương thức

   jQuery.noConflict();
   $('#prizePopup').modal('show');
   

   jQuery bí danh sự kiện thích .load, .unloadhoặc .errorbị phản đối kể từ jQuery 1.8.

   $(window).on('load', function(){ 
         $('#prizePopup').modal('show');
   });
   

   HOẶC thử mở cửa sổ bật lên phương thức trực tiếp

   $('#prizePopup').on('shown.bs.modal', function () {
         ...
   });
   

thay đổi thứ tự của script

Vì bootstrap là một plugin jquery nên nó yêu cầu Jquery thực thi

Thay đổi câu lệnh nhập đã hoạt động. Từ

import * as $ from 'jquery';

đến:

declare var $ : any;

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.

Tôi gặp lỗi này khi tích hợp modal bootstrap trong angle.

Đây là giải pháp của tôi để giải quyết vấn đề này.

Tôi chia sẻ mối quan tâm cho ai.

Bước đầu tiên bạn cần cài đặt jqueryvà bootstrapbằng npmlệnh.

Thứ hai, bạn cần thêm declare var $ : any;thành phần

Và sử dụng có thể sử dụng $('#myModal').modal('hide');trên phương thức onSave ()

Demo https://stackblitz.com/edit/angular-model-bootstrap-close?file=src/app/app.component.ts

Sử dụng:

jQuery.noConflict();
$('#prizePopup').modal('toggle');

Sự cố đã xảy ra với tôi chỉ trong sản xuất chỉ vì tôi đã nhập jquery bằng HTTP chứ không phải HTTPS (và sản xuất là HTTPS)

Tôi đến bữa tiệc hơi muộn, tuy nhiên có một lưu ý quan trọng:

Các tập lệnh của bạn có thể theo đúng thứ tự nhưng hãy để ý bất kỳ chữ nào asynctrong thẻ tập lệnh của bạn (như thế này)

<script type="text/javascript" src="js/bootstrap.js" async></script>

Điều này có thể gây ra sự cố. Đặc biệt nếu bạn có asyncbộ này chỉ dành cho môi trường Sản xuất, điều này có thể khiến bạn thực sự khó chịu khi phải giải thích.

Cố gắng giải quyết vấn đề này, đã kiểm tra thứ tự tải và nếu jQuery được đưa vào hai lần thông qua tính năng gộp, nhưng đó dường như không phải là nguyên nhân.

Cuối cùng đã sửa nó bằng cách thực hiện thay đổi sau:

(trước):

$('#myModal').modal('hide');

(sau):

window.$('#myModal').modal('hide');

Tìm thấy câu trả lời ở đây: https://github.com/ColorlibHQ/AdminLTE/issues/685

Bạn phải bao gồm:

bootstrap.min.css
jquery.min.js
bootstrap.min.js