admin管理员组

文章数量:1186460

I am modifying the text of the "More" links created by Fullcalendar V6. When those links are clicked, Fullcalendar re-renders its own text into the element, which is behind the popover div and cannot be seen. Once the popover is deleted, I need to again correct the text.

I have set listeners on the cancel button which work well, but if the user clicks anywhere outside the popover or taps the escape key, the popover is deleted without firing my Mutation Observer. If I set a timeout to delete the popover, the mutation observer correctly detects the change.

What am I missing?

(This project includes jQuery, but it's not necessary)

$(document).on('click', 'a.fc-daygrid-more-link, .fc-popover-close', function(){
    // fullCalendar rerenders the More links when they are clicked, so we have to redo the fixes
    fixLinksOnCalendar(true);
    setTimeout(() => {
        var popoverID = $(this).attr('aria-controls');
        console.log('popover id='+popoverID );
        var elem = document.getElementById(popoverID)
        observeDeletion(elem);
        
        // this test deletion is detected as expected
        setTimeout(function(){
            console.log('Deleting the elem');
            $(elem).remove();
        }, 5000);
    }, 400);

});

function observeDeletion(elem){
    var target = elem.parentNode;
    console.log('observing target:', target);
    const calPopupObserver = new MutationObserver(function (e) {
        console.log('Generic Mutation:', e);
        if (typeof e[0].removedNodes === 'array' && e.removedNodes[0] === elem){
            console.log('Fixing Links');
            fixLinksOnCalendar(true);
            calPopupObserver.disconnect();
            return;
        }
    });
    calPopupObserver.observe(target, { childList: true, subtree: true, });
};

function fixLinksOnCalendar(repeat){ // they are way too low in the grid, especially on mobile
    setTimeout(function(){ // FC needs some time        
        var calTextColor = settings.dark_ui == 'no' ? settings.colors[5]:settings.colors[4];
        $('.fc-more-link, a.fc-more-link, a.fc-daygrid-more-link').css({marginTop: '-10px', color: calTextColor, fontWeight: 600});
        if ($(window).width() < 521){ // shorten and restyle the link text
            var newText;
            $.each($('.fc-more-link'), function(){
                newText = '+'+parseInt($(this).text(), 10);
                $(this).text(newText).css({color: 'white', backgroundColor: settings.colors[5], padding: '3px 6px', borderRadius: '10px', marginLeft: '12px'});
            });

            $.each($('a.fc-more-link'), function(){
                newText = '+'+parseInt($(this).text(), 10);
                $(this).text(newText).css({color: 'white', backgroundColor: settings.colors[5], padding: '3px 6px', borderRadius: '10px', marginLeft: '12px'});
            });

            $.each($('a.fc-daygrid-more-link'), function(){
                newText = '+'+parseInt($(this).text(), 10);
                $(this).text(newText).css({color: 'white', backgroundColor: settings.colors[5], padding: '3px 6px', borderRadius: '10px', marginLeft: '12px'});
            });
        }
        if (repeat) fixLinksOnCalendar(false);
    },300);
}

本文标签: javascriptFullcalendar Mutation Observer Failing to Detect Deletion of DOM ElementStack Overflow