javascript - 提交表单时完整日历ajax循环

Question

我正在尝试将完整日历转换为使用表单。一切正常，除非您提交一个事件，然后尝试提交另一个事件。它似乎陷入了一个循环并将事件值应用于先前的 eventid 和新的 eventid。

这里有一些屏幕截图显示了正在发生的事情。在第一次约会时，选择我让我的表单弹出窗口填写值并单击保存我收到我的警报(数据)消息。 24日保存并插入数据。

现在点击25日再添加一个事件，弹出表单这就是您在 24 日看到我的第一个事件的样子，而新的创建事件是在 25 日。

我填写值单击保存我收到我的警报(数据)消息并单击确定后，它插入到前一个事件中，即 24 号，然后显示另一个警报(数据)

关闭第二个警报(数据)然后像它应该的那样插入第 25 个警报。

然后如果我刷新页面，它们都会在 25 日返回，所以它会在 25 日插入它们

这是我用于插入的代码部分。如果您熟悉完整日历，您可能会知道这是什么。对我来说，选择功能似乎在控制每次点击。比如我点击10号然后取消，再点击15号还是会插入到10号。

   select: function(start, end, allDay) { 
   calendar.fullCalendar('unselect'); 
    var startDate = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
    var endDate = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
    $('#start').val(startDate);
    $('#end').val(endDate);
    $('#createEventModal').fadeIn(500);
    //Prevent default form action
    $('#createEventForm').on('submit', function(e){
        return false;
    });
    //Cancel Click close form
    $(document).on('click', '.close, .btnCancel', function(){   
      $('#createEventModal').hide('fast');
      document.getElementById("createEventForm").reset();
      calendar.fullCalendar('unselect');
    });
    //Submit event form click
    $('#submitButton').on('click', function(e){
      // We don't want this to act as a link so cancel the link action
      e.preventDefault();
      doSubmit();
    });
      function doSubmit(){
      var title = $('#createEventForm #title').val();
      if (title) {
       var data = $('#createEventForm').serialize();
       alert(data);
            $('#createEventModal').hide('fast');       
       $.ajax({
        url: wnm_custom.plugin_url+'/add_events.php',
       data: data,
       type: "POST",
         success: function(json) {
            document.getElementById("createEventForm").reset();
            $('div#myDialogSuccess').fadeIn(500);
            $('div#myDialogSuccess').fadeOut(2000);
         }
         });
         calendar.fullCalendar('renderEvent',
         {
         title: title,
         start: start,
         end: end,
         allDay: allDay
         },
         true // make the event "stick"
         );
         }
         calendar.fullCalendar('unselect');
         };
},

这是我的表格

<form id="createEventForm" class="form-horizontal">
    <div class="control-group">
        <label class="control-label" for="inputEvent">Event:</label>
        <div class="controls">
            <input type="text" name="title" id="title" tyle="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source="[&quot;Value 1&quot;,&quot;Value 2&quot;,&quot;Value 3&quot;]">
        </div>
    </div>
    <div class="control-group">    
        <label class="control-label" for="inputUrl">URL:</label>
        <div class="controls">
            <input type="text" name="url" id="url" tyle="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source="[&quot;Value 1&quot;,&quot;Value 2&quot;,&quot;Value 3&quot;]">
        </div>
    </div>
     <div class="control-group">    
        <label class="control-label" for="inputUrl">Start:</label>
        <div class="controls">
            <input type="text" name="start" id="start" tyle="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source="[&quot;Value 1&quot;,&quot;Value 2&quot;,&quot;Value 3&quot;]">
        </div>
    </div>
    <div class="control-group">    
        <label class="control-label" for="inputUrl">End:</label>
        <div class="controls">
            <input type="text" name="end" id="end" tyle="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source="[&quot;Value 1&quot;,&quot;Value 2&quot;,&quot;Value 3&quot;]">
        </div>
    </div>
        <div class="control-group">
            <label class="control-label" for="when">Check for email alerts:</label>
            <div class="controls">
            <input type="checkbox" name="emailalerts" class="emailalerts" id="emailalerts"/>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btnCancel" data-dismiss="modal" aria-hidden="true">Cancel</button>
            <button type="submit" id="submitButton" class="btn btn-primary" >Save</button>
        </div>        
    </form>

Answer 1

两次 ajax 调用由于未取消绑定(bind)以下事件。日历中的每个选择都会创建新事件。第一次它会很好它只创建一个 Action ，第二次选择时间它创建其他事件 1 + 1 = 2，第三次选择将进行三个 ajax 调用 2 + 1 = 3 它会继续。

$('#submitButton').on('click', function(e){
  // We don't want this to act as a link so cancel the link action
  e.preventDefault();
  doSubmit();
});

试试这个，在参加那个事件之前你总是需要下车

$('#submitButton').off('click')
$('#submitButton').on('click', function(e){
  // We don't want this to act as a link so cancel the link action
  e.preventDefault();
  doSubmit();
});