TypeError: $(...).modal is Not a Function with Bootstrap Modal

問題

當動態插入Bootstrap 模態到另一個視圖的HTML，您可能會遇到以下錯誤： TypeError: $(...).modal is not a function。此錯誤表示 jQuery 無法辨識 modal() 方法，導致模式無法正常運作。

解決方案：檢查 jQuery 包含

要解決此問題，請先驗證是否包含 jQuery在專案中。確保沒有重複包含 jQuery，因為這可能會導致衝突。確認 jQuery 函式庫在頁面

範例實作

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

            // Check if jQuery.modal is defined before calling it
            if ($.fn.modal && typeof $.fn.modal === 'function') {
                $('#form-content').modal();
            }
        }
    }
});
//...

結束語

透過驗證jQuery 的正確包含以及基於其可用性的modal() 方法的條件執行，您可以確保Bootstrap 模態將正確運行並避免TypeError: $(...).modal is not a function 錯誤。