为什么我的处理程序被多次调用？

Question

当我在日历中删除某些东西并显示一个调度对话框时，我会调用它，当我按下该对话框上的按钮时，它会进行ajax调用。

我注意到我第一次点击它，1 ajax调用，下一次按，2 ajax调用，等等。

我只想要btnSchedule的1个处理程序：

看到：

  $('#btnSchedule').on('click', function () {

。

 drop: function(date, allDay, ev, ui, resource) { // this function is called when something is dropped

                    // retrieve the dropped element's stored Event Object
                    var originalEventObject = $(this).data('eventObject');

                    // we need to copy it, so that multiple events don't have a reference to the same object
                    var event = $.extend({}, originalEventObject);

                    var obj = this;

                    var hours = 1;

                    var id = event.id;
                    var type = event.type;


                   $('#txtFrom').change(function () {
                       $('#txtHours').val('');
                       fillPriorityList("#<%= ddlPriority.ClientID %>",type + id,resource.id,$('#txtFrom').val());
                    });
                    showScheduler(
                        event.title,
                        $.fullCalendar.formatDate(date,'dddd MMMM dd yyyy'),
                        $.fullCalendar.formatDate(date, 'MM/dd/yyyy'),
                        event.canReoccur,event.reoccurVal,"#<%= ddlPeriod.ClientID %>",
                        "#<%= cbPeriod.ClientID %>");

                    fillPriorityList("#<%= ddlPriority.ClientID %>",type + id,resource.id,$('#txtFrom').val());


                    $('#btnSchedule').on('click', function () {
                        var hrs = $('#txtHours').val();
                        var usingHrs = (isNaN(hrs) == false && hrs > 0);
                        var usingRange = isDateRangeValid('#txtFrom','#txtTo');
                        var canRec = event.canReoccur;
                        var periodChecked = $("#<%= cbPeriod.ClientID %>").prop('checked');
                        var recVal = $("#<%= ddlPeriod.ClientID %>").prop('selectedIndex');
                        var priority = $("#<%= ddlPriority.ClientID %>").val();

                        if(usingHrs || usingRange)
                        {
                            var  f = $.datepicker.parseDate('m/d/yy', $('#txtFrom').val());
                            var  t = $.datepicker.parseDate('m/d/yy', $('#txtTo').val());
                            var correctStart = usingHrs ? date : f;
                            $.ajax({
                                type: "POST",
                                url: "CalendarServices.aspx/RegisterEvent",
                                data: 'id=' + id + '&start=' + $.fullCalendar.formatDate(correctStart, 'yyyy-MM-dd')
                                    + '&end=' + $.fullCalendar.formatDate(t, 'yyyy-MM-dd') + '&type=' + type + '&hours=' + hrs + '&resource=' + resource.id
                                 + '&canRec=' +  canRec + '&periodChecked=' + periodChecked + '&recVal=' + recVal + '&priority=' + priority,

                                success: function (data) {
                                    $(obj).remove();
                                    changeUnscheduledHeaders();
                                    closeScheduler();                              
                                    $('#calendar').fullCalendar('refetchEvents');
                                }
   ,
                                error: function () {
                                }
                            });
                        }

                    })


                }

                ,

我能做什么才能只调用一次ajax？

谢谢

Answer 1

在再次绑定之前尝试取消绑定单击处理程序

$('#btnSchedule').off('click').on('click'...

如果多次绑定它，则每次绑定时都会执行回调。

Answer 2

使用event.stopPropagation（）; 如此：

  $('#btnSchedule').on('click', function () {

    event.stopPropagation();

    [the rest of your code]