Остановить распространение от клика в модальной форме

Question

После добавления события в календарь, когда я добавляю другое событие, у меня есть распространение события, и у меня, после повторного нажатия второго события, когда я вставляю другое событие, у меня есть событие дерева ecc ... Для остановки распространения у меня есть добавить .off ('click'), но в этом методе не работает кнопка закрытия модальной. У вас есть решение этой ошибки?

$('#calendar').fullCalendar({
  schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
  header: {
    center: 'title',
    left: 'today prev,next,addEventButton',
    right: 'timelineDay,timelineThreeDays,agendaWeek,month,listWeek'
  },
  editable: true,
  defaultView: 'timelineDay',
  resourceLabelText: 'Rooms',
  slotLabelFormat: ['H:mm'],
  defaultTimedEventDuration: "01:00",
  selectHelper: true,
  snapDuration: '00:30:00',
  selectable: true,
  aspectRatio: 1.8,
  scrollTime: '08:00',
  resources: '{!! route('
  fullcalendar.roomall ') !!}',
  events: '{!! route('
  fullcalendar.bookingall ') !!}',
  select: function(start, end, jsEvent, view, resourceId, event) {

    $('#event-modal').find('input[name=title]').val('');
    // set values in inputs
    $('#event-modal').find('input[name=evtStart]').val(
      start.format('YYYY-MM-DD HH:mm:ss')
    );
    $('#event-modal').find('input[name=evtEnd]').val(
      end.format('YYYY-MM-DD HH:mm:ss')
    );
    $('#event-modal').modal('show');

    $("#event-modal").off('click').on('click', '.save', function(e) {

      var id = resourceId['id'];
      var roomName = resourceId['title'];
      var title = $('#title').val();
      var start = $('#evtStart').val();
      var end = $('#evtEnd').val();
      $('#event-modal').modal('hide');

      $.ajax({
        url: '{{ route('
        events.save ') }}',
        data: $("#event-modal").serialize(),
        type: 'post',
        dataType: 'json',
        data: {
          '_token': $('input[name=_token]').val(),
          'title': title,
          'start': start,
          'end': end,
          'roomId': id,
          'roomName': roomName
        },
        success: function(response) {
          console.log(response);
          $("#calendar").fullCalendar('refetchEvents');
        }
      });
    });
  }
});

  <div class="row">
        <!-- Button trigger modal -->
        <div class="col-md-12">
            <div id="calendar"></div>


            <div class="modal fade" id="event-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        {{ csrf_field() }}
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                            <h4 class="modal-title">Modal title</h4>
                        </div>
                        <div class="modal-body">
                            <form name="save-event" method="post">
                                <div class="form-group">
                                    <label>Title</label>
                                    <input type="text" name="title" id="title" class="form-control col-xs-3" />
                                </div>
                                <div class="form-group">
                                    <label>Event start</label>
                                    <input type="text" name="evtStart" id="evtStart" class="form-control col-xs-3" />
                                </div>
                                <div class="form-group">
                                    <label>Event end</label>
                                    <input type="text" name="evtEnd" id="evtEnd" class="form-control col-xs-3" />
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button"  class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="submit" class="save btn btn-primary">Save changes</button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div><!-- /.modal -->
        </div>
    </div>

Answer 1

вы добавляете обработчик событий «onclick» в класс .save, но вы настроены на # event-modal

change

$("#event-modal").off('click').on('click', '.save', function (e) {

на

$("#event-modal .save").off('click').on('click', function (e) {