FullCalendar 事件弹出按钮单击不起作用

Posted 2023-05-08

【中文标题】FullCalendar 事件弹出按钮单击不起作用

【英文标题】：FullCalendar Event Popover Button Click Not Working

【发布时间】：2018-05-31 03:59:02

【问题描述】：

我正在使用 FullCalendar 来显示事件。单击事件时，会显示一个带有事件信息的弹出框和一个用于打开页面以查看更多详细信息的按钮。我有带有详细信息的弹出框设置，并且按钮可以工作，但所需的完整日历事件编号中的 id 始终是日历上的最后一个，而不是单击事件中的那个。

我需要单击事件，打开弹出框，然后单击查看按钮以打开带有单击事件 ID 的新页面。

$('.fullcalendar-event').fullCalendar(
    header: 
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    ,
    defaultDate: today,
    editable: false,
    eventOverlap: false,
    displayEventTime: false,
    eventSources: 
        type: "POST",
        url: 'php_files/calender_php_files/populate_calender.php',
        data: 
            client_id: sessionStorage.getItem('client_id'),
            access_id: sessionStorage.getItem('access_id')
        
    ,
    eventRender: function (event, element) 
        var event_popover = element.popover(
            title: function () 
                return "<B>" + event.event_title + "</B>";
            ,
            placement: 'auto',
            html: true,
            trigger: 'click',
            animation: 'false',
            content: function () 
                if (event.event_type === 'embargo') 
                    return "<div>" +
                        "<b>Site: </b>" + event.event_site +
                        "<br />" +
                        "<b>Start: </b>" + moment(event.event_start_date).format('DD/MM/YYYY') + ", " +
                        moment(event.event_start_time, 'HHmmss').format('HH:mm') +
                        "<br />" +
                        "<b>End: </b>" + moment(event.event_end_date).format('DD/MM/YYYY') + ", " +
                        moment(event.event_end_time, 'HHmmss').format('HH:mm') +
                        "<br />" +
                        "<br />" +
                        "<button id='view' class='btn btn-primary btn-xs view'>View</button>" +
                        "</div>"
                 else if (event.event_type === 'permit') 
                    return "<div>" +
                        "<b>Site: </b>" + event.event_site +
                        "<br />" +
                        "<b>Start: </b>" + moment(event.event_start_date).format('DD/MM/YYYY') + ", " +
                        moment(event.event_start_time, 'HHmmss').format('HH:mm') +
                        "<br />" +
                        "<b>End: </b>" + moment(event.event_end_date).format('DD/MM/YYYY') + ", " +
                        moment(event.event_end_time, 'HHmmss').format('HH:mm') +
                        "<br />" +
                        "<br />" +
                        "<button class='btn btn-primary btn-xs view'>View</button>" +
                        "<button style='margin-left: 8px;' class='btn btn-warning btn-xs clear'>Clear</button>" +
                        "<button style='margin-left: 8px;' class='btn btn-danger btn-xs cancel'>Cancel</button>" +
                        "</div>"
                
            ,
            container: 'body'
        ).popover('show');
        $('body').on('click', function (e) 
            if (!element.is(e.target) && element.has(e.target).length === 0 && $('.popover').has(e.target).length === 0)
                element.popover('hide');
        );
        $(document).on("click", ".view", function() 
            window.location.replace('edit_site_embargo.php?embargo_id=' + event.event_number)
        )
    
);

【参考方案1】：

您的块$(document).on("click", ".view", function() ，对每个日历事件执行一次。因此，如果您有 20 个日历事件，您将在“视图”类中获得 20 个“点击”事件处理程序。然而，这个结构意味着你所有的“查看”按钮都会触发所有 20 个点击处理程序，因为它们都绑定到同一个东西。因此，当您单击其中一个按钮时，window.location.replace 命令运行了 20 次，但执行速度如此之快，以至于实际上只有命令的最后一个副本似乎在执行，这将是指最后一个日历的副本事件。这解释了您当前看到的行为。

你需要做的是：

1) 将点击事件处理程序代码移到eventRender 函数之外，使其只运行一次，并创建一个处理程序。这很好，因为您使用了委托事件处理，因此它仍然会绑定到所有创建的按钮。

2) 在按钮上定义一个数据属性，您可以在单击按钮时检索该数据属性，其中包含要使用的事件 ID。

因此，将此块完全移到日历设置代码之外，并稍微重新定义：

    $(document).on("click", ".view", function() 
        window.location.replace('edit_site_embargo.php?embargo_id=' + $(this).data("event-number")); //get the event number from the button's data-attribute
    )

并更改您的弹出框创建代码，以便它使用包含事件编号的额外属性定义您的“查看”按钮：

"<button class='btn btn-primary btn-xs view' data-event-number='" + event.event_number + "'>View</button>" +

（顺便说一句，我建议你从按钮的“禁运”版本中删除“id="view”，因为这可能会创建多个具有相同 ID 的元素，这不是有效的 HTML。）