防止 Fullcalendar 在更改月份时为同一元素添加新的单击事件处理程序

Question

我在 EventAfterAllRender 回调中有一个点击事件处理程序，我不知道原因，但每次我在 timelineMonth 中更改月份时，都会向同一元素添加一个新的点击处理程序，触发次数与处理程序一样多单击该元素时已添加。

我怎样才能避免这种情况？我想将点击处理程序代码放在 fullCalendar 之外，但我需要它在 timelineMonth 视图中触发。我需要限制每个元素一个点击处理程序。

$(function() { // document ready

  $('#calendar').fullCalendar({
    schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
    editable: true,
    navLinks: true,
    header: {
      left: 'today prev,next',
      center: 'title',
      right: 'timelineDay,timelineMonth'
    },
    defaultView: 'timelineMonth',
    // This handler is added as many times as I change the month
    // and I need to prevent this
    eventAfterAllRender: function(view) {

        $("td.fc-resource-area tr").on('click', function(e) {
                alert ("Hi!")      
      });   
    },

    resourceGroupField: 'building',
    resourceColumns: [
        {
            labelText: 'first column',
            field: 'title',
            width: 150
        }
    ],
    resources: [{
      id: 'a',
      building: '460 Bryant',
      title: 'Click here',
      title2: 'Auditorium A\nAddition info'
    }, {
      id: 'b',
      building: '460 Bryant',
      title: 'Click here',
      eventColor: 'green'
    }, {
      id: 'c',
      building: '460 Bryant',
      title: 'Click here',
      eventColor: 'orange'
    }],
    events: [{
      id: '1',
      resourceId: 'b',
      start: '2016-12-07T02:00:00',
      end: '2016-12-07T07:00:00',
      title: 'event 1'
    }, {
      id: '2',
      resourceId: 'c',
      start: '2016-12-07T05:00:00',
      end: '2016-12-07T22:00:00',
      title: 'event 2'
    }, {
      id: '3',
      resourceId: 'f',
      start: '2016-12-07T00:30:00',
      end: '2016-12-07T02:30:00',
      title: 'event 5'
    }]
  });

});

JSFiddle

Answer 1

添加了一个新的点击处理程序，因为您可以向一个元素添加无限数量的事件处理程序 - 添加新的事件处理程序不会删除旧的。当然，每次您更改日期时，它都会重新呈现事件，但不会重新呈现资源，因此更多的处理程序只会添加到现有的资源元素中。

您可以使用 .off() 删除所选元素上所有先前的事件处理程序来解决它，即

$("td.fc-resource-area tr").off().on('click', function(e) { alert ("Hi!") });

更新您的 JSFiddle：https://jsfiddle.net/xvos6f82/6/

防止 Fullcalendar 在更改月份时为同一元素添加新的单击事件处理程序

Preventing Fullcalendar of adding a new click event handler for the same element when month is changed

jquery

fullcalendar

fullcalendar-scheduler