javascript 保留旧变量

Question

我正在使用 JQueryFullCaledar 并编写了一个函数来劫持 eventclick。默认情况下它只是运行这个代码：

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

我劫持了这个事件，改为打开一个提供三个选项的上下文菜单：

编辑，删除关闭菜单。如果他们选择删除，它会运行与以前相同的功能，但会使用 if 语句（由甜蜜警报辅助）来检查他们是否确定。

如果他们选择关闭，它只会关闭菜单

如果他们选择编辑，它会通过 AJAX 将约会 ID 发送到 PHP 文件，这样我就可以更新它。我注意到在更新其中一些时，在前几次打开后约会不正确。所以，我添加了一个 catch 以在运行 AJAX.When 之前提醒约会的 ID 我打开我的第一个约会，我收到一个带有第一个约会 ID 的警报。我关闭它，然后打开另一个，此时我首先收到第一个 ID 的警报，然后是新 ID 的第二个警报，然后打开另一个约会给我这两个警报，第三个警报和第三个约会 ID 等等。 .. 我尝试在单击取消或保存编辑文件时将 ID 设置为空白，但没有成功。

事件点击函数的完整代码如下：

 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。当您附加一个处理程序时，前一个处理程序不会被删除，它会堆叠起来。您应该只附加一次（或在附加新处理程序之前删除以前的处理程序）。您可以将事件 ID 存储到变量中并在点击处理程序中使用它。

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!");
      }
    });
});

javascript 保留旧变量

javascript holding onto old variable

javascript

php

jquery

event-calendar