javascript - Jquery .remove() 仅在第二次点击后起作用
问题描述
单击页面上的通知图标后,我会弹出一个引导弹出窗口。它的部分功能是在单击弹出框后从弹出框中删除任何通知。这是带有三个通知的弹出窗口的图像,以供参考:
但是,当我打开通知弹出框,然后单击任何通知时,第一次单击不会删除通知,但第二次会删除。点击监听器第一次和第二次触发(通过登录到控制台确认)。我检查了与我类似的其他问题,但没有一个问题适合我。我读了一些关于“焦点”的东西,但不明白它们的意思。也许这与它有关?
这是弹出框代码:
$(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 和弹出框的情况下删除代码中其他地方的元素,并且它在第一次单击时起作用。任何见解表示赞赏!
解决方案
如果要向其添加单击事件侦听器的元素。尚不存在,这可能是个问题。
.off
顺便说一句
推荐阅读
- c - 如何读取文本文件并将其内容存储到另一个字符串中?C
- javascript - Object.keys(myObject).forEach() 会同步执行吗?
- powerbi - 如何在 Power BI 查询编辑器中为最大日期添加自定义列?
- javascript - 使用 Puppeteer,如何在无需实际单击链接并加载页面的情况下获取最终的重定向 URI?
- c - 如何在具有动态字符串的函数中使用 malloc 而不是在末尾添加符号
- java - javax.net.ssl.SSLHandshakeException:握手期间远程主机关闭连接。重新启动服务器后它工作正常,但它再次出现
- reactjs - 返回 React Native 应用时调用函数
- javascript - Axios 方法将项目作为 null 传递,而不是实际值传递给我的猫鼬路线
- authentication - 如何在futurebuilder中设置用户ID
- ios - 错误:段控制中的索引超出范围