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语句（由甜蜜警报辅助）以检查是否确定。

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

如果他们选择编辑，则它将约会的ID通过AJAX发送到PHP文件，以便我进行更新。我已经注意到，在更新其中的一组时，打开前几对后约会不正确。因此，我在运行AJAX之前添加了一个警告以提醒约会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保留旧变量

2 个答案: