为何Fomantic UI的nag组件onHidden回调函数无法触发？

核心问题 #

你的代码每次点击按钮都会重复初始化nag组件，同时结合persist: true和sessionstorage的设置，导致组件状态混乱，onHidden回调无法正常触发。

具体原因 #

1. 重复初始化冲突：每次调用$(".ui.nag").nag({...})都会重新绑定组件逻辑，覆盖之前的回调绑定，甚至导致组件内部状态异常，关闭操作无法触发回调。
2. 持久化存储干扰：开启persist后，关闭nag会在sessionStorage中标记该nag为"已关闭"。再次初始化时，组件会自动读取这个状态并隐藏nag，导致你看不到nag，自然无法触发关闭回调。

修复代码 #

// 页面加载完成后仅初始化一次nag组件
$(document).ready(function() {
  $(".ui.nag").nag({
    persist: true,
    onHidden: function() {
      alert('closed');
    },
    storageMethod: "sessionstorage"
  });
});

// 点击按钮仅触发显示操作，而非重新初始化
function showNag() {
  $(".ui.nag").nag('show');
}

额外测试提示 #

如果需要反复测试关闭回调，可以：

• 暂时将persist设为false，避免存储状态干扰；
• 或者在浏览器开发者工具的Application面板中，清除sessionStorage里以nag-开头的键值对，重置nag的持久化状态。

内容的提问来源于stack exchange，提问作者thothal