У меня есть всплывающее окно bootstrap, которое появляется после нажатия на значок уведомления на моей странице. Частью его функциональности является удаление любого уведомления из всплывающего окна после нажатия на него. Вот изображение всплывающего окна с тремя уведомлениями, для справки:
уведомления
Однако, когда я открываю всплывающее окно уведомления, затем нажмите на любое из уведомлений, первый щелчок не удалит уведомление, но второй удалит. Слушатель щелчков срабатывает как первый, так и второй раз (подтверждается входом в консоль). Я проверил другие вопросы, похожие на мои, но ни у одного из них не было решения, которое помогло бы мне. Я прочитал кое-что о «фокусе», но не мог понять, что они имели в виду. Может быть, это как-то связано?
Вот код поповера:
$(document).ready(function(){
$("#notificationsBell").popover({
'title' : $('.notifications-title-header').html(), // display:none so it doesn't show up in window
'html' : true,
'placement' : 'left',
'content' : $(".notifications-list").html() // display:none
});
});
А вот прослушиватель щелчков, который должен удалить уведомление:
$('body').off("click").on("click", ".popover-body .notif-popup-container", function() {
var notifId = $(this).attr("id");
$('#' + notifId).remove();
})
Я думаю, что это связано с поповером и дисплеем: никаких аспектов. Это потому, что я пытаюсь удалить элементы в другом месте кода без отображения: none и popover, и это работает при первом нажатии. Любое понимание приветствуется!