javascript - 使用 fullCalendar eventClick 在 Bootstrap 模式上警报/确认多次触发

Question

我在 fullcalendar 上使用 eventClick 函数，并且遇到以下问题，每当我单击某个事件时，模式就会打开，我可以编辑此特定事件，当我单击“保存”(使用另一个 onclick 函数)时，会触发一个确认，该确认的触发次数与之前打开模式的次数相同。

让我用我的代码来解释一下..

    eventClick: function (calEvent, jsEvent, view) {

    $('#myModalEditEvent').modal('show');

    $("#deleteEventfromEditModal").click(function () {
                if (!confirm("are you sure?")) {
                    return 0;
                }
                else {
                    var classID = calEvent.id;

                    var deleteRequest = {
                        classID: classID,
                    };

                    var dataString = JSON.stringify(deleteRequest); // parsing the request above. 
                    $.ajax({     // starting an  ajax func 
                        })
                };
            });  
 }

这是我的 html 代码:

<div class="modal fade" id="myModalEditEvent" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title" id="EditEventHeader"></h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <select id="ClassesDDLEdit" class="form-control"></select>
                </div>
                <div class="form-group">
                    <select id="GuidesDDLEdit" class="form-control"></select>
                </div>
                <div class="input-group bootstrap-timepicker timepicker">
                    <input id="classStartTimeEdit" type="text" class="form-control input-small" placeholder="Start time">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
                </div><br />
                <div class="input-group bootstrap-timepicker timepicker">
                    <input id="classEndTimeEdit" type="text" class="form-control input-small" placeholder="start time">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
                </div><br />
                <div class="modal-footer">
                    <button type="button" id="AddEventAfetEditing" class="btn btn-info center-block" data-toggle="modal" data-target="#myModalEditEvent">Save</button><br />
                    <button type="button" id="deleteEventfromEditModal" class="btn btn-danger glyphicon glyphicon-trash center-block" data-toggle="modal" data-target="#myModalEditEvent"></button>
                </div>
            </div>
        </div>
    </div>
</div>

我能做些什么来防止这种情况发生？

感谢大家的帮助!

Answer 1

更改您的以下行

$("#deleteEventfromEditModal").click(function () {

如下

$("#deleteEventfromEditModal").unbind( "click" ).click(function () {

因为每次点击都会绑定(bind)一个点击事件。所以每次都需要解绑