Bootstrap modal: ไม่ใช่ฟังก์ชัน

ฉันมีโมดอลในหน้าของฉัน เมื่อฉันพยายามเรียกมันเมื่อ windows โหลดมันพิมพ์ข้อผิดพลาดไปยังคอนโซลที่ระบุว่า:

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

นี่คือ Modal 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 ไว้ 1 อินสแตนซ์และโค้ดของคุณก็จะใช้งานได้

<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 ไม่ใช่ฟังก์ชัน:

1. สคริปต์ถูกโหลดในลำดับที่ไม่ถูกต้อง
2. อินสแตนซ์ jQuery หลายรายการ

แนวทางแก้ไข:

1. ในกรณีหากสคริปต์พยายามเข้าถึงองค์ประกอบที่ยังไม่ถึงคุณจะได้รับข้อผิดพลาด Bootstrap ขึ้นอยู่กับ jQuery ดังนั้นจึงต้องอ้างอิง jQuery ก่อน ดังนั้นคุณต้องถูกเรียกว่า jquery.min.js จากนั้น bootstrap.min.js และต่อไปข้อผิดพลาด bootstrap Modal นั้นเป็นผลมาจากการที่คุณไม่รวมจาวาสคริปต์ของ bootstrap ก่อนที่จะเรียกฟังก์ชัน modal Modal ถูกกำหนดไว้ใน bootstrap.js และไม่ได้อยู่ใน jQuery ดังนั้นควรรวมสคริปต์ไว้ในลักษณะนี้

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

2. ในกรณีที่มีหลายอินสแตนซ์ของ jQuery การประกาศ jQuery ครั้งที่สองจะป้องกันไม่ให้ bootstrap.js ทำงานอย่างถูกต้อง ดังนั้นใช้ประโยชน์ jQuery.noConflict();ก่อนที่จะเรียกป๊อปอัปโมดอล

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

   jQuery นามแฝงเหตุการณ์ชอบ.load, .unloadหรือ.errorเลิกใช้ตั้งแต่ jQuery 1.8

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

   หรือลองเปิดป๊อปอัปโมดอลโดยตรง

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

เปลี่ยนลำดับของสคริปต์

เนื่องจาก bootstrap เป็นปลั๊กอิน jquery ดังนั้นจึงต้องใช้ Jquery เพื่อดำเนินการ

การเปลี่ยนคำสั่งการนำเข้าใช้งานได้ จาก

import * as $ from 'jquery';

ถึง:

declare var $ : any;

วิ่ง

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

ในโครงการเพื่อเพิ่มประเภท 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 ให้รวม " jquery " ในฟิลด์ types ของไฟล์ tsconfig.app.json

สิ่งนี้จะลบข้อผิดพลาดทั้งหมดของ 'modal' และ '$' ในโครงการ Angular ของคุณ

ฉันพบข้อผิดพลาดนี้เมื่อรวม modal bootstrap ในเชิงมุม

นี่คือทางออกของฉันในการแก้ปัญหานี้

ฉันแบ่งปันความห่วงใยให้ใคร

ขั้นตอนแรกคุณต้องติดตั้งjqueryและbootstrapตามnpmคำสั่ง

ประการที่สองคุณต้องเพิ่มdeclare var $ : any;ในองค์ประกอบ

และการใช้งานสามารถใช้$('#myModal').modal('hide');onSave () วิธีการ

สาธิตhttps://stackblitz.com/edit/angular-model-bootstrap-close?file=src/app/app.component.ts

ใช้:

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

ปัญหาเกิดขึ้นกับฉันในการผลิตเพียงเพราะฉันนำเข้า jquery ด้วย HTTP ไม่ใช่ HTTPS (และการผลิตคือ HTTPS)

ฉันไปงานปาร์ตี้ช้าไปหน่อย แต่มีหมายเหตุสำคัญ:

สคริปต์ของคุณอาจอยู่ในลำดับที่ถูกต้อง แต่ระวังสิ่งใด ๆasyncในแท็กสคริปต์ของคุณ (เช่นนี้)

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

ซึ่งอาจเป็นสาเหตุของปัญหา โดยเฉพาะอย่างยิ่งถ้าคุณมีasyncชุดนี้สำหรับสภาพแวดล้อมการใช้งานจริงสิ่งนี้อาจทำให้คุณรู้สึกหงุดหงิดกับเหตุผล

พยายามแก้ปัญหานี้ตรวจสอบลำดับการโหลดและหากรวม jQuery สองครั้งผ่านการรวมกลุ่ม แต่ดูเหมือนจะไม่เป็นสาเหตุ

สุดท้ายแก้ไขโดยทำการเปลี่ยนแปลงต่อไปนี้:

(ก่อน):

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

(หลังจาก):

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

พบคำตอบที่นี่: https://github.com/ColorlibHQ/AdminLTE/issues/685

คุณต้องรวม:

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