2016-11-04 4 views
0

Если вы создаете событие, оно отлично работает, но когда вы создаете больше, система создает все события до + того, который вы создаете прямо сейчас.Когда я создаю второе событие в полном календаре, создаются два события:

<div id='wrap'> 


<div id="fullCalModalModify" class="modal fade"> 
<div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button> 
      <a>Title:</a><input id="modalTitleModify" class="modal-title" autofocus><a>Avec:</a><input id="modalClientModify" class="modal-title"> 
     </div> 

     <div class="modal-footer"> 
      <button class="alert alert-success" id="btnSave"><a target="_blank">Save</a></button> 
     </div> 
    </div> 
</div> 

    <div id="calendar"></div> 
    <div style='clear:both'></div> 
</div> 

$(document).ready(function() { 
var title; 
var client; 
var eventData; 
/* initialize the external events------------------------------*/ 
$('#external-events .fc-event').each(function() { 
// store data so the calendar knows to render an event upon drop 
$(this).data('event', { 
title: $.trim($(this).text()), // use the element's text as the event title 
stick: true // maintain when user navigates (see docs on the renderEvent method) 
}); 

    // make the event draggable using jQuery UI 
$(this).draggable({ 
     zIndex: 999, 
     revert: true,  // will cause the event to go back to its 
     revertDuration: 0 // original position after the drag 
    }); 
}); 

$('#calendar').fullCalendar({ 
    header: { 
     left: 'prev,next today', 
     center: 'title', 
     right: 'month,agendaWeek,agendaDay,listMonth' 
    }, 
    defaultDate: '2016-09-12', 
    droppable: true, // this allows things to be dropped onto the calendar 
    navLinks: true, // can click day/week names to navigate views 
    businessHours: true, // display business hours 
    editable: true, 
    selectable: true, 
    selectHelper: true, 
    select: function(start, end) { 
     $('#modalTitleModify').val(""); 
     $('#modalClientModify').val(""); 
     $('#fullCalModalModify').modal(); 
     $("#btnSave").click(function() {  
      title = $('#modalTitleModify').val(); 
      client = $('#modalClientModify').val(); 
      description = $('#modalDescriptionModify').val(); 
      if (title) {   
       eventData = { 
        title: title, 
        clientName: client, 
        start: start, 
        end: end 
       }; 
       $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true 
       $("#fullCalModalModify").modal('hide'); 
      } 
    }); 
    $('#calendar').fullCalendar('unselect'); 
    }, 
    loading: function(bool) { 
    $('#loading').toggle(bool); 
    /*end of section separate windows */ 
     },   
    }); 
}); 

http://jsfiddle.net/prodeinfo/x4dbs8qz/

Я не понимаю, почему, вы можете помочь мне, пожалуйста?

ответ

1

Я думаю, что проблема заключается в том, что вы добавляете нового прослушивателя событий каждый раз, когда вызывается функция select (select: function(start, end) {....}).

Вы можете исправить это, используя функцию jquery .one(...). Вот пример:

select: function(start, end) { 
    .... 
    $("#btnSave").one("click", function() { 
     .... 
    } 
} 

It seems to be working

+0

Да, это работает, большое спасибо, теперь я должен читать о функции одной(), спасибо оооочень много раз! –

+0

есть небольшая проблема, когда вы нажимаете на дату и приближаетесь к окну и нажимаете на другую дату, создаете приложение, вы создаете 2 appoitment –

+1

@DanBrisson Я не считал, что слушатель останется, если вы закроете всплывающее окно без нажатия «сохранить». Что вы можете сделать, так это удалить всех слушателей с кнопки сохранения до добавления нового. Вот пример http://jsfiddle.net/d3tmcndy/2/ – Titus