完整日历删除多个事件

Question

我有完整的日历版本 4 运行一个数据库连接。一切都按预期工作。我有调度程序许可证，所以我可以使用资源功能。

现在我遇到了一个问题，当我点击一个模型弹出的事件时。比我关闭该模型并打开另一个事件并对该模型执行操作。为这两个事件执行此操作。看起来 event.id 是从上次事件中记住的。希望有人知道我该如何解决这个问题。当我想删除一个事件时它不是很有用，它会删除多个事件:-)

这是我的事件点击函数：

eventClick: function (info) {
  var id = info.event.id;
  var koppeling = info.event.extendedProps.klant_koppeling;
  $("#bekijkAfspraak").on("click", "#bekijk_koppel", function (e) {
    if ($(this).is(":checked")) {
      console.log("Klant koppeling: aan");
      koppeling = 1;
    } else {
      console.log("Klant koppeling: Uit");
      koppeling = 0;
    }
  });
  //save changed event information
  $("#bekijkAfspraak").on("click", "#show_save", function (e) {
    var plaatsnaam = $("input#bekijk_plaatsnaam").val();
    var opmerking = $("input#bekijk_opmerking").val();
    var klantnaam = $("input#bekijk_klantnaam").val();
    var aantal_8 = $("input#bekijk_aantal8").val();
    var aantal_14 = $("input#bekijk_aantal14").val();
    var actie = $("#bekijk_actie_dropdown").val();
    var inladen = $("#bekijk_laad_keuze").val();
    var id = info.event.id;

    $.ajax({
      type: "POST",
      url: "php/update_info.php",
      data:
        "&klantnaam=" +
        klantnaam +
        "&opmerking=" +
        opmerking +
        "&id=" +
        id +
        "&plaatsnaam=" +
        plaatsnaam +
        "&aantal_8=" +
        aantal_8 +
        "&aantal_14=" +
        aantal_14 +
        "&koppeling=" +
        koppeling +
        "&actie=" +
        actie +
        "&inladen=" +
        inladen,
      success: function (response) {
        console.log("Geupdate");

        Push.create("Afpsraak Geupdate", {
          body:
            "De afspraak van: " +
            plaatsnaam +
            " is geupdate Voor klant: " +
            klantnaam,
          icon: "../assets/afbeeldingen/logo.png",
          timeout: 4000,
          onClick: function () {
            window.focus();
            this.close();
          },
        });
      },
    });
  });

  //check cancel clicked on add Modal
  $("#afsrpaakAdd").on("click", "#add_cancel", function (e) {
    info.event.remove();
  });

  $("#bekijk_betaald_status").hide();
  //set the values and open the modal
  $("#bekijkAfspraak").modal("show");

  $("#startTime").html(
    info.event.start.toISOString().slice(0, 19).replace("T", " ")
  );
  if (info.event.end == null) {
    $("#endTime").html(
      info.event.start.toISOString().slice(0, 19).replace("T", " ")
    );
  } else {
    $("#endTime").html(
      info.event.end.toISOString().slice(0, 19).replace("T", " ")
    );
  }
  //Voeg afspraak informatie toe
  $("input#bekijk_plaatsnaam").val(info.event.title);
  // $("input#bekijk_actie").val(info.event.extendedProps.actie);
  $("#bekijk_laad_keuze").val(info.event.extendedProps.inladen);
  $("#bekijk_actie_dropdown").val(info.event.extendedProps.actie);
  $("input#bekijk_opmerking").val(info.event.extendedProps.description);
  $("input#bekijk_klantnaam").val(info.event.extendedProps.klantnaam);
  $("input#bekijk_aantal8").val(info.event.extendedProps.aantal_8);
  $("input#bekijk_aantal14").val(info.event.extendedProps.aantal_14);

  var klant_id = info.event.extendedProps.klant_id;

  //Delete
  $("#bekijkAfspraak").on("click", "#delete", function (e) {
    var id = info.event.id;
    $.ajax({
      type: "POST",
      url: "/planner/delete.php",
      data: "id=" + id,
      success: function (response) {
        console.log("Afspraak:", info.event.title + " Is Verwijderd");
        $("#bekijkAfspraak").modal("hide");
        // planning.refetchEvents();
        // info.event.remove();
        location.reload();
      },
    });
  });

  //maak vervoerslijst aan
  $("#bekijkAfspraak").on("click", "#vervoerslijst", function (e) {
    var id = info.event.id;
    var klantnaam = info.event.extendedProps.klantnaam;
    //System id of customer
    var klant_id = info.event.extendedProps.klant_id;
    var actie = info.event.extendedProps.actie;
    console.log("actie", actie);
    $.ajax({
      type: "POST",
      url: "/objects/functions/pdf/examples/example_mobox.php",
      data:
        "&klantnaam=" +
        klantnaam +
        "&actie=" +
        actie +
        "&id=" +
        id +
        "&klant_id=" +
        klant_id,
      success: function (response) {
        console.log("Voervoerslijst aangemaakt voor klant", klantnaam);
        var ifr = document.getElementById("iFramePdf");
        if (actie === "LB") {
          printJS("/admin/vervoer/leeg/" + klantnaam + ".pdf");
        }
        if (actie === "LH") {
          printJS("/admin/vervoer/leeg/" + klantnaam + ".pdf");
        }
        if (actie === "VB") {
          printJS("/admin/vervoer/vol/" + klantnaam + ".pdf");
        }
        if (actie === "VH") {
          printJS("/admin/vervoer/vol/" + klantnaam + ".pdf");
        }
        if (actie === "BZ") {
          printJS("/admin/vervoer/buiten/" + klantnaam + ".pdf");
        }
        Push.create("Veroerslijst aangemaakt", {
          body:
            "Voervoerslijst is juist aangemaakt voor " +
            klantnaam +
            "Type actie " +
            actie,
          icon: "../assets/afbeeldingen/logo.png",
          timeout: 2000,
          onClick: function () {
            window.focus();
            this.close();
          },
        });
      },
    });
  });

  //verstuur bevesting naar klant
  $("#modalBevestig").on("click", "#verstuur", function (e) {
    var id = info.event.id;
    var start = info.event.start
      .toISOString()
      .slice(0, 19)
      .replace("T", " ");
    if (info.event.end == null) {
      var end = info.event.start
        .toISOString()
        .slice(0, 19)
        .replace("T", " ");
    } else {
      var end = info.event.end.toISOString().slice(0, 19).replace("T", " ");
    }
    var klantnaam = info.event.extendedProps.klantnaam;
    //System id of customer
    var klant_id = info.event.extendedProps.klant_id;
    var actie = info.event.extendedProps.actie;
    $.ajax({
      type: "POST",
      url: "verzendafspraak.php",
      data:
        "id=" +
        id +
        "&start=" +
        start +
        "&end=" +
        end +
        "&klantnaam=" +
        "&klant_id=" +
        klant_id +
        "&actie=" +
        actie,
      success: function (response) {
        console.log("Afpsraak  verstuurd naar klant", klantnaam);

        Push.create("Bevestiging gestuurd", {
          body: "De bevestiging is juist verstuurd naar " + klantnaam,
          icon: "../assets/afbeeldingen/logo.png",
          timeout: 2000,
          onClick: function () {
            window.focus();
            this.close();
          },
        });
        $("#modalBevestig").modal("hide");
        planning.refetchEvents();
      },
    });
  });

  if (info.event.extendedProps.klant_koppeling == 1) {
    $("input#bekijk_koppel").prop("checked", true);
    $("#bekijk_klant_gegvens").show(1000);
    $.ajax({
      type: "POST",
      url: "/planner/klantController.php",
      data: "klant_id=" + klant_id,
      dataType: "json",
      success: function (response) {
        var klantnaam = response.klantnaam;
        var telefoon = response.telefoon;
        $("input#bekijk_klantnaam").val(klantnaam);
        $("input#bekijk_Telefoon").val(telefoon);
        //check actie en voeg juiste adres toe
        if (
          info.event.extendedProps.actie === "VB" ||
          info.event.extendedProps.actie === "LH"
        ) {
          $("input#bekijk_adres").val(response.adres2);
          $("input#bekijk_inladen").val(response.laden_na);
        } else if (
          info.event.extendedProps.actie === "LB" ||
          info.event.extendedProps.actie === "VH"
        ) {
          $("input#bekijk_adres").val(response.adres1);
          $("input#bekijk_inladen").val(response.inladen);
        }
        if (response.locatie2 == null) {
          $("input#bekijk_boxLocatie").val(response.locatie);
        } else {
          $("input#bekijk_boxLocatie").val(
            response.locatie + " " + response.locatie2
          );
        }
        //einde van actie checken

        var boxnmrs = response.box1;
        var box = [
          response.box1,
          response.box2,
          response.box4,
          response.box4,
          response.box5,
          response.box6,
          response.box7,
          response.box8,
          response.box9,
          response.box10,
        ];
        for (var i = 1; i <= 10; i++) {
          if (box[i] == null) {
          } else {
            boxnmrs += " " + box[i];
          }
        }
        $("input#bekijk_boxNummers").val(boxnmrs);
      },
    });
    //end of ajax Klant koppeling
  } else {
    //Laat geen klant gegevens zien en zet checkbox op false
    $("input#bekijk_koppel").prop("checked", false);
    $("#bekijk_klant_gegvens").hide();
  }
  $("input#bekijk_koppel").on("change", function () {
    if ($(this).is(":checked")) {
      $("#bekijk_betaald_status").hide();
      $("#bekijk_klant_gegvens").show(1000);
      $.ajax({
        type: "POST",
        url: "/planner/klantController.php",
        data: "klant_id=" + klant_id,
        dataType: "json",
        success: function (response) {
          var klantnaam = response.klantnaam;
          var telefoon = response.telefoon;
          $("input#bekijk_klantnaam").val(klantnaam);
          $("input#bekijk_Telefoon").val(telefoon);
          //check actie en voeg juiste adres toe
          if (
            info.event.extendedProps.actie === "VB" ||
            info.event.extendedProps.actie === "LH"
          ) {
            $("input#bekijk_adres").val(response.adres2);
            $("input#bekijk_inladen").val(response.laden_na);
          } else if (
            info.event.extendedProps.actie === "LB" ||
            info.event.extendedProps.actie === "VH"
          ) {
            $("input#bekijk_adres").val(response.adres1);
            $("input#bekijk_inladen").val(response.inladen);
          }
          if (response.locatie2 == null) {
            $("input#bekijk_boxLocatie").val(response.locatie);
          } else {
            $("input#bekijk_boxLocatie").val(
              response.locatie + " " + response.locatie2
            );
          }
          //einde van actie checken

          var boxnmrs = response.box1;
          var box = [
            response.box1,
            response.box2,
            response.box4,
            response.box4,
            response.box5,
            response.box6,
            response.box7,
            response.box8,
            response.box9,
            response.box10,
          ];
          for (var i = 1; i <= 10; i++) {
            if (box[i] == null) {
            } else {
              boxnmrs += " " + box[i];
            }
          }
          $("input#bekijk_boxNummers").val(boxnmrs);
        },
      });
      //end of ajax Klant koppeling
    } else {
      $("#bekijk_betaald_status").hide();
      $("#bekijk_klant_gegvens").hide(1000);
    }
  });
  //kijk of betaald is
  $("#check_paid").click(function () {
    //$(this).hide(1000);
    $("#bekijk_betaald_status").hide();
    $.ajax({
      type: "POST",
      url: "/planner/klantController.php",
      data: "klant_id=" + klant_id,
      dataType: "json",
      success: function (response) {
        console.log("verkrijg klant informatie..");
        var betaald = response.betaald;

        if (betaald === "ja") {
          $("#bekijk_betaald_status").show(100);
          $("#bekijk_betaald_status").html(betaald);
          console.log("betaald");
        } else if (betaald === "nee") {
          $("#bekijk_betaald_status").show(100);
          $("#bekijk_betaald_status").html(betaald);
          console.log("Niet betaald");
        } else if (betaald === "nieuw") {
          $("#bekijk_betaald_status").show(100);
          $("#bekijk_betaald_status").html(betaald);
          console.log("Nieuwe klant");
        }
      },
    });
  });
},

Answer 1

这是因为每次 eventClick 运行时，您运行 $("#bekijkAfspraak").on... 都会为您的按钮创建一个事件处理程序。但是添加事件处理程序不会自动删除以前的事件处理程序！一个元素可以有许多附加到它的事件处理程序，所有事件处理程序都处理同一个事件。因此，下次您单击该按钮时，附加到该按钮的所有事件处理程序都将运行。这就是为什么它每次都会再次添加您以前的日历事件。

在添加新事件处理程序之前，您需要使用 .off() 删除这些按钮上以前的事件处理程序。

例如写作

$("#bekijkAfspraak").off("click", "#show_save")

就在相关 .on() 命令将从 "show_save" 按钮删除点击处理程序之前。

在 eventClick 回调中对所有其他人重复相同的模式。

完整日历删除多个事件

Full calendar Removes multiple events

jquery

event-handling

fullcalendar

fullcalendar-scheduler