点击动态添加的事件

Question

我有以下js:

    !function ($) {
  $(function(){
    // fullcalendar
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();
    var addDragEvent = function($this){
      // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
      // it doesn't need to have a start or end
      var eventObject = {
        title: $.trim($this.text()), // use the element's text as the event title
        className: $this.attr('class').replace('label','')
      };
      // store the Event Object in the DOM element so we can get to it later
      $this.data('eventObject', eventObject);
      // make the event draggable using jQuery UI
      $this.draggable({
        zIndex: 999,
        revert: true,      // will cause the event to go back to its
        revertDuration: 0  //  original position after the drag
      });
    };
    $('.calendar').each(function() {
      $(this).fullCalendar({
        header: {
          left: 'prev,next',
          center: 'title',
          right: 'today,month,agendaWeek,agendaDay'
        },
        editable: true,
        droppable: true, // this allows things to be dropped onto the calendar !!!
        drop: function(date, allDay) { // this function is called when something is dropped
            // retrieve the dropped element's stored Event Object
            var originalEventObject = $(this).data('eventObject');
            // we need to copy it, so that multiple events don't have a reference to the same object
            var copiedEventObject = $.extend({}, originalEventObject);
            // assign it the date that was reported
            copiedEventObject.start = date;
            copiedEventObject.allDay = allDay;
            // render the event on the calendar
            // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
            $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
            // is the "remove after drop" checkbox checked?
            if ($('#drop-remove').is(':checked')) {
              // if so, remove the element from the "Draggable Events" list
              $(this).remove();
            }
          }
        ,
        events: [
        ],
          eventClick: function(event) {
              alert('win');
          }
      });
    });
      getEvents();
  });
}(window.jQuery);
function getEvents()
{
    $.ajax({
        type: 'POST',
        url: '/Calendar/findEvents',
        dataType: 'json',
        data: {
            request: 'ajax'
        },
        success: function (data)
        {
            if(data.length > 0)
            {
                for (index = 0; index < data.length; ++index)
                {
                    var d = new Date(data[index]['end']);
                    if(data[index]['is_online'] === 1)
                    {
                        var myevent = {title: 'Forløb: '+data[index]['academy_name'].toUpperCase()+' n   Modul: '+data[index]['module_name']+ 'n Type: E-learning',start: new Date(d.getFullYear(), d.getMonth(), d.getDate())};
                    }
                    else
                    {
                        var myevent = {title: 'Forløb: '+data[index]['academy_name'].toUpperCase()+' n   Modul: '+data[index]['module_name']+ 'n Type: Kursus'+ 'n Lokation: '+data[index]['location']+'n Underviser: '+data[index]['mentor'],start: new Date(d.getFullYear(), d.getMonth(), d.getDate())};
                    }
                    $('.calendar').fullCalendar( 'renderEvent', myevent, true);
                }
            }
        }
    });
}

正如你所看到的，当日历加载时，我开始加载事件(通过ajax)到日历中。

现在我要做的就是简单地在每个元素上添加一个eventlistener。

在文档中声明如下:

    eventClick: function(event) {
    if (event.url) {
        window.open(event.url);
        return false;
    }
}

我尝试了一个简单的警报(如您在代码中看到的:

)

    eventClick: function(event) {
     alert('win');
}

然而，当我点击我的项目没有任何反应。

谁能告诉我我错过了什么?

Answer 1

我知道您正在通过AJAX加载事件，但是您是否尝试过在日历实例化中向事件数组返回对象数组(事件)?现在你正在传递一个空数组，所以插件没有分配任何元素作为'事件'，因此没有分配任何点击处理程序。

 events: [  getEvents()
 ],
 eventClick: function(event) {
    alert('win');
    }
});

然后在你的getEvents()函数调用中，而不是渲染事件，你应该只返回事件对象。

Answer 2

建议使用ajax调用+对接收到的数据进行一些操作来加载事件的方法是使用函数作为事件源(链接到文档):

$(this).fullCalendar({ ...
    events: function(start, end, tz, callback) {
        $.ajax({
            type: 'POST',
            url: '/Calendar/findEvents',
            dataType: 'json',
            data: {
                request: 'ajax'
            },
            success: function (data) {
                // build an array of event objects with the data
                var events = ...
                // use the "callback" argument to load them in the grid :
                callback(events);
            }
        });
    },
    ...
 });

注意:函数的签名取决于你正在使用的fullcalendar的版本。版本2.0之前的版本没有tz参数(同样，请查看文档)。

Answer 3

FullCalendar正在处理没有事件的侦听器。在日历初始化之后加载ajax。你可以保留当前的代码，并在eventRender上添加侦听器。

$('#calendar').fullCalendar({
     eventRender: function(event, element, view){
        element.click(function(){
            alert('test');
        })
      }
    });

我可能会建议按照其他答案中的建议加载事件，但这应该可以工作。

Answer 4

$('#calendar').fullCalendar({
     eventRender: function(event, element, view){
        element.click(function(){
            alert('test');
        });
        $("#calendar .fc-helper-container").find("a").remove();
     }
});