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

Posted 2023-05-08

【中文标题】Jquery .remove() 仅在第二次点击时起作用

【英文标题】：Jquery .remove() only acts on second click

【发布时间】：2020-07-25 10:16:33

【问题描述】：

我正在使用引导弹出框构建通知功能。用户单击通知后应将其删除，这很直观。然而，它需要两次点击才能使其工作——第一次，似乎什么都没有发生。通过 alert() 发现，单击侦听器会触发两次。

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

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

将代码放在上面是因为它不会让我在没有代码 sn-p 的情况下提交，尽管小提琴 js 应该有你需要的一切。

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

【问题讨论】：

那是因为弹出框复制了元素。并且 id 必须是唯一的。所以第一次它选择第一个，下一次它选择第二个。做$("#" + $(this).attr("id")) 没有多大意义，是吗？

$("#" + $(this).attr("id")).remove(); 如果你知道某人的电话号码，你会打电话给他们询问他们的电话号码，然后再打电话给他们吗？您可以简单地执行$(this).remove();，它消除了“双击”问题。

【参考方案1】：

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

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

【参考方案2】：

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

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

【参考方案3】：

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

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

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