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为同一元素添加新的click事件处理程序

1 个答案: