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

Question

我正在使用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)
        })
    }
});

Answer 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
    })

，还更改您的popover创建代码，以便使用包含事件编号的额外属性来定义您的"视图"按钮：

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

（顺便说一句，我建议您从该按钮的"禁运"版本中删除" ID ="视图"，因为这可以创建具有相同ID的多个元素，这是无效的HTML。）