$(...).modal 在 FullCalendar 中单击 customButton 时不是函数

编程问答 2022-08-11

问题描述

我试图在 fullCalendar 中单击 customButton 时显示模式。

但点击按钮后，出现此错误。

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

这是我的模态：

<div class="modal fade" id="MyModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <a href="#" class="close" data-dismiss="modal">&times;</a>
                <h4 id="ModalTitle"></h4>
            </div>
            <div class="modal-body">
                <form id="formModal">
                    <fieldset>
                    </fieldset>
                    <div class="form-group">
                        <div>
                            <center>
                                <a id="updateInfo" class="btn btn-block btn-primary">更新</a>
                            </center>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>

这是我在 fullCalendar 中创建的自定义按钮。

customButtons: {
    AddEvent: {
        text: 'Add Event',click: function () {
            $('#ModalTitle').html('Add New Event');
            $('#MyModal').modal();   
        }
    }
},

我尝试在此站点上搜索解决方案并尝试重新排序我的脚本和链接，但它不起作用。

这是我的 <head> 标签：

 <!-- required Meta tags -->
    <Meta charset="utf-8">
    <Meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">


    <title>HRIS - Dashboard</title>

    <link href="~/Content/dboardStyle.css" rel="stylesheet" />
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&display=swap" rel="stylesheet">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <!--fontawesome-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
          integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!--Full Calendar-->
    <link href="~/Content/fullcalendar/lib/main.css" rel="stylesheet" />
    <link href="~/Content/fullcalendar/calendarCss.css" rel="stylesheet" />
    <script src="~/Content/fullcalendar/lib/main.js"></script>
    <script src="~/Content/fullcalendar/js/theme-chooser.js"></script>

谁能帮我找到一种在 fullCalendar 中使用 customButton 显示模态的方法。

提前致谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

fullcalendarhtmljavascriptjquerytwitter-bootstrap