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 错误。