Jquery .remove() 仅在第二次点击后起作用

Question

单击页面上的通知图标后，我会弹出一个引导弹出窗口。它的部分功能是在单击弹出框后从弹出框中删除任何通知。这是带有三个通知的弹出框的图像，供参考：

notifications

但是，当我打开通知弹出框，然后单击任何通知时，第一次单击不会删除通知，但第二次会删除。点击监听器第一次和第二次触发（通过登录到控制台确认）。我检查了与我类似的其他问题，但没有一个问题适合我。我读了一些关于“焦点”的东西，但不明白它们的意思。也许这与它有关？

这是弹出框代码：

$(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();
})

我认为这与 popover 和 display:none 方面有关。这是因为我尝试在没有 display:none 和弹出框的情况下删除代码中其他地方的元素，并且它在第一次单击时起作用。任何见解都值得赞赏！

Answer 1

如果您要向其添加点击事件侦听器的元素。尚不存在，这可能是个问题。

.offbtw 是什么