Jquery .remove() 只作用于第二次点击

Question

我正在构建带有 bootstrap 弹出窗口的通知功能。通知应该在用户点击后被删除，这是很直观的。但是，需要单击两次才能使其工作——第一次，似乎什么也没有发生。通过 alert() 发现点击侦听器两次触发。

我在这个 fiddle js 中将我的问题简化为最基本的可重现形式： https://jsfiddle.net/ksun78/758n1azu/36/

$('body').on("click", ".popover-body .notif-popup-container", function() {
  $("#" + $(this).attr("id")).remove();
})

将代码放在上面，因为它不会让我提交没有代码片段，尽管 fiddle js 应该有你需要的一切。

有人可以解释可能是什么问题以及如何解决吗？谢谢！

Answer 1

我认为问题在于 popover 库克隆了您的元素，因此有两个元素具有相同的 ID。您可以像这样修改您的代码，这样它就可以工作，但最好避免使用相同的 ID

$('body').on("click", ".popover-body .notif-popup-container", function() {
  $(`[id="${$(this).attr("id")}"]`).remove();
})

Answer 2

如果您只是想删除 div 您可以使用以下代码：

$(document).on("click", ".notif-popup-container", function() {
  $(this).remove();
});

Answer 3

事实证明，在幕后，popover 会复制元素并显示它们。这意味着仅使用 ID 来删除元素是行不通的，因为它会首先删除页面上的 display:none 元素，然后是弹出窗口中显示的副本。感谢@Gabriel 指出这一点。

这里的解决方案只是不使用元素的 id 属性，因为它是不必要的。一个简单的 $(this).remove() 就可以了。

关于重复id的问题：我原本打算将通知id存储在"data-id"属性中。但是，使用 jquery 检索 "data-id" 返回未定义，因此我选择了 "id" 属性。也许@Gabriel 可以提供一些关于 "data-id" 未定义问题的见解，因为它似乎也是一个与弹出窗口相关的问题。

Jquery .remove() only acts on second click