FullCalendar事件彈出按鈕單擊不起作用

Question

我正在使用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個單擊處理程序，因為它們都綁定到同一事物。因此，當單擊按鈕之一時，單擊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
    })

還要更改您的彈出窗口創建代碼，以便它使用包含事件號的額外屬性來定義“查看”按鈕：

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

（順便說一句，我建議您從按鈕的“禁運”版本中刪除“ id =“ view”，因為這可能會創建具有相同ID的多個元素，而這是無效的HTML。）