在向事件动态添加“删除”按钮后删除事件。“删除”按钮不可见

Question

在使用“删除”按钮删除事件后，我在ListDay中向事件添加了“删除”按钮，“删除”按钮在fullcalendar中不可见。

$('#cal2').fullCalendar({
  height: 'auto',
  defaultView: 'listDay',
  events:this.myClonedArray,
  defaultDate: this.startdate,
  viewRender: function(view) {
    $('.cal2 .fc-toolbar').css({
      'display': 'none',
    });
    $(".fc-list-table .fc-list-heading .fc-widget-header").attr('colspan', 4);
    $(".fc-list-table .fc-list-item").append('<td class="w3-center"><button class="fc-delete-item ">Delete</button></td>');
  },
  eventClick: function(event, jsEvent, view) {
    var x = "" + event.id + "";
    localStorage.setItem("delete_id", x);
    $(".w3-center").on("click", function() {
      var result = confirm("Delete Event");
      if (result) {
        console.log(event);
        $('#cal2').fullCalendar('removeEvents', x);
      }
    });
  }
});       

之前：

之后：

Answer 1

你在这里遇到的问题是你在渲染视图时添加了删除按钮。

但是，渲染视图（即日历网格）和渲染事件是单独的过程。您的代码目前仅在（启动时）工作，因为您从数组加载了一组静态事件。如果您使用AJAX作为事件源，那么它将无法添加按钮，因为事件将在视图之后呈现（即，当您尝试使用jQuery选择它们时，具有这些CSS类的元素将不存在） 。

这导致删除事件后失败的原因：删除单个事件会导致重新呈现所有事件（如果他们的位置或大小需要更改）。但是，它不会导致视图重新呈现。因此，添加删除按钮的代码不会运行。

显而易见的解决方案是使用eventAfterAllRender回调代替。这可以确保在所有事件完成添加到日历后每次都运行代码。

然而，事实并非最终答案。你遇到的另一个琐碎问题是你必须在“删除”按钮上单击两次才能工作。这是因为您没有在按钮上附加“click”事件，直到用户在事件上至少点击过一次。

修复此问题的方法是使用eventRender回调将每个按钮单独添加到其事件中，然后再将其添加到日历中，然后立即将click事件附加到该事件，以便在事件发生时立即点击它被展示。

实际上，添加按钮的代码现在位于eventRender而不是eventAfterAllRender。在此之前需要做的就是在列表标题上设置colspan ...并且可以非常愉快地在viewRender中处理，因为在删除事件后不需要重新绘制。

这是完成的代码：

  $('#cal2').fullCalendar({
    height: 'auto',
    defaultView: 'listDay',
    events: this.myClonedArray,
    defaultDate: this.startdate,
    viewRender: function(view) {
      $('.cal2 .fc-toolbar').css({
        'display': 'none',
      });
      $(".fc-list-table .fc-list-heading .fc-widget-header").attr('colspan', 4);
    },
    eventRender: function(event, element, view) {
      element.append('<td class="w3-center"><button class="fc-delete-item ">Delete</button></td>');
      element.find(".w3-center").on("click", function() {
        var result = confirm("Delete Event");
        if (result) {
          console.log(event);
          localStorage.setItem("delete_id", event.id);
          $('#cal2').fullCalendar('removeEvents', event.id);
        }
      });
    },
  });

这是一个可运行的演示：http://jsfiddle.net/108sad4f/3/