JavaScript держит на старой переменной

Question

Я использую JQueryFullCaledar и написал функцию для захвата события клика.По умолчанию он просто запускает этот код:

var id = event.id;
      $.ajax({
       url:"delete.php",
       type:"POST",
       data:{id:id},
       success:function()
       {
        calendar.fullCalendar('refetchEvents');
        //alert("Event Removed");
       }
      })

Я перехватил это событие, чтобы вместо этого открыть контекстное меню, предлагающее три варианта:

Редактировать, Удалить Закрыть меню.Если они выбирают удалить, он запускает ту же функцию, что и раньше, но с оператором if (с помощью приятных предупреждений), чтобы убедиться, что они уверены.

Если они выбирают закрыть, он просто закрывает меню

Если они выбирают изменить, он отправляет идентификатор встречи в файл PHP через AJAX, чтобы я мог обновить его.Я заметил, что при обновлении нескольких из них назначение не правильно после первых двух открытий.Итак, я добавил уловку, чтобы предупредить ID встречи до запуска AJAX. Когда я открываю свою первую встречу, я получаю уведомление с первым идентификатором встречи.Я закрываю это, затем открываю другое, после чего я сначала получаю оповещение с первым идентификатором, затем второе с новым идентификатором, затем открытие другого собрания дает мне эти два оповещения и третье с третьим идентификатором встреч и так далее... Я пытался установить пустой идентификатор при нажатии кнопки «Отмена» или «Сохранить» в файле редактирования, но безуспешно.

Вот весь код функции щелчка по событию:

 eventClick:function(event)
    {

$('.appt_menu').removeClass('hidden').css( {position:"absolute", top:event.pageY, left: event.pageX});

        $('a.close_menu').on("click",function(){
            $('.appt_menu').addClass('hidden');
        })

        $('a.edit_appt').on("click",function(){
            $('.appt_menu').addClass('hidden');

        //show me the ID before sending it via AJAX 
         alert(event.id);  

           $('#modalwindow').load("Form_Edit_Appt.php", {id: event.id}, function(data) { calendar.fullCalendar('refetchEvents');});
$('.backdropper, #modalwindow').addClass('show');


        }); //end of edit appt function

            $('a.delete_appt').on("click",function(){
                $('.appt_menu').addClass('hidden');

     swal({
  title: "Are you sure you want to delete this Appointment?",
  text: "Once deleted, you will not be able to recover this imaginary file!",
  icon: "warning",
  buttons: ["Not that one!", "Yep, delete it!"],
  //buttons: true,
  dangerMode: true,
})
.then((willDelete) => {
  if (willDelete) {
    swal("Your Appointment has been deleted!", {
      icon: "success",
    });

    var id = event.id;
      $.ajax({
       url:"delete.php",
       type:"POST",
       data:{id:id},
       success:function()
       {
        calendar.fullCalendar('refetchEvents');
        //alert("Event Removed");
       }
      })    
  } else {
    swal("Your Appointment has not been removed!");
  }
});
}) 
    },

Answer 1

Вы связываете обработчики событий каждый раз, когда делаете исходный eventClick.Попробуйте отменять привязку с помощью off () каждый раз, когда вы устанавливаете обработчики кликов, чтобы удалить все ранее установленные обработчики.

Пример:

$('a.edit_appt').off().click(function() {
    //your code
});

Answer 2

Вы прикрепляете обработчик событий к edit_appt при каждом щелчке календаря. Когда вы прикрепляете обработчик, предыдущий не удаляется, он складывается. Вы должны прикрепить его только один раз (или удалить предыдущий обработчик, прежде чем присоединять новый). Вы можете сохранить идентификатор события в переменной и использовать его в обработчике кликов.

var eventId;

eventClick: function(event) {

    $('.appt_menu').removeClass('hidden').css({
      position: "absolute",
      top: event.pageY,
      left: event.pageX
    });

    eventId = event.id;
  }

$('a.close_menu').on("click", function() {
  $('.appt_menu').addClass('hidden');
});

$('a.edit_appt').on("click", function() {
  if (!eventId)
    return;

  $('.appt_menu').addClass('hidden');

  //show me the ID before sending it via AJAX 
  alert(eventId);

  $('#modalwindow').load("Form_Edit_Appt.php", {
    id: eventId
  }, function(data) {
    calendar.fullCalendar('refetchEvents');
  });
  $('.backdropper, #modalwindow').addClass('show');


}); //end of edit appt function

$('a.delete_appt').on("click", function() {
  if (!eventId)
    return;

  $('.appt_menu').addClass('hidden');

  swal({
      title: "Are you sure you want to delete this Appointment?",
      text: "Once deleted, you will not be able to recover this imaginary file!",
      icon: "warning",
      buttons: ["Not that one!", "Yep, delete it!"],
      //buttons: true,
      dangerMode: true,
    })
    .then((willDelete) => {
      if (willDelete) {
        swal("Your Appointment has been deleted!", {
          icon: "success",
        });

        var id = eventId;
        $.ajax({
          url: "delete.php",
          type: "POST",
          data: {
            id: id
          },
          success: function() {
            calendar.fullCalendar('refetchEvents');
            //alert("Event Removed");
          }
        })
      } else {
        swal("Your Appointment has not been removed!");
      }
    });
});