javascript holding onto old variable

Question

I'm using JQueryFullCaledar and have written a function to hijack the eventclick. By default it just ran this code:

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

I've hijacked this event to instead open a context menu offering three options:

Edit, Delete Close Menu. If they choose delete it runs the same function as before but with an if statement (aided by sweet alerts) to check they're sure.

If they choose close, it just closes the menu

If they choose edit it sends the Id of the appointment over to a PHP file via AJAX so I can update it. I've noticed when updating a bunch of them the appointment isn't correct after the first couple of opens. So, I added a catch to alert the ID of the appointment before runnning AJAX.When I open my first appointment, I get an alert with the first appointment ID. I close that, then open another, at which point I first get an alert with the first ID, then a second with the new ID, then opening another appointment gives me those two alerts and a third with the third appointments ID and so on... I've tried setting the ID to blank on clicking cancel or save on the edit file but no luck.

Here's the whole code for the event click function:

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

Seems like you might be adding multiple event handlers (on each click of the calendar) to the click events of `edit_appt` and `delete_appt`. — H77, Jun 27 '19 at 02:15

Eric Svitok · Accepted Answer · 2019-06-27T02:28:03.283

1

You are binding event handlers every time you do your initial eventClick. Try unbinding with off() every time you set the click handlers so any previously set handlers are removed.

Example:

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

edited Jun 27 '19 at 02:28

answered Jun 27 '19 at 02:20

Eric Svitok

792
5
11

1

that's fantastic! thank you! would you recommend doing that for all three of the click events I listen for (edit, delete and close)? – Greg Jun 27 '19 at 02:30
Yes, this is because every time you are doing your eventClick, you are setting those inner on click events and they are just piling up every time you do eventClick. This is why you're getting the alert 3 times if you click it 3 times. It is running all the other functions you bound to the on clicks previously. – Eric Svitok Jun 27 '19 at 02:33

score 0 · Answer 2 · answered Jun 27 '19 at 02:24

You're attaching an event handler to the edit_appt on each click of the calendar. When you attach a handler the previous one isn't removed, it stacks up. You should attach it only once (or remove the previous handler before attaching a new one). You could store the event id to a variable and use that in the click handler.

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 holding onto old variable

2 Answers2