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
版权声明:本文标题:javascript - Fullcalendar Mutation Observer Failing to Detect Deletion of DOM Element - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1738335116a2076766.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论