FullCalendar活动弹出按钮单击“不工作”

Posted 2021-04-07

我正在使用FullCalendar来显示事件。单击事件时，将显示一个包含事件信息的弹出框和一个用于打开页面以查看更多详细信息的按钮。我有弹出窗口设置的详细信息和按钮工作，但所需的fullcalendar事件编号中的id始终是日历上的最后一个，而不是点击事件中的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)
        })
    }
});

答案

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

你需要做的是：

1）将click事件处理程序代码移到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
    })

并且还更改您的popover创建代码，以便它定义“视图”按钮，其中包含一个包含事件编号的额外属性：

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

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