alert / Confirm使用fullCalendar eventClick在bootsrap模式上多次触发

时间:2016-03-24 12:25:47

标签: javascript jquery twitter-bootstrap fullcalendar

我在eventClick上使用fullcalendar功能,我有以下问题,每当我点击一个模态正在打开的事件,我可以编辑此特定事件,当我点击保存(使用另一个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>

我该怎么做才能防止它发生?

感谢所有的帮助!

2 个答案:

答案 0 :(得分:0)

你应该这样做

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

eventClick之外,并在例如页面加载中执行。

$(document).ready(function(e){...})

答案 1 :(得分:0)

更改以下行

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

如下

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

因为每次点击都会绑定点击事件。因此,您需要每次取消绑定