如何使Bootstrap Popover事件生效？实现Popover显示后自动隐藏

看起来你的代码里有几个小问题，导致shown.bs.popover事件没能正常生效，我帮你梳理并修正一下：

问题分析 #

1. jQuery选择器错误：你写的$("submit-btn1")缺少了id选择器的#前缀，正确的写法应该是$("#submit-btn1")，否则JS找不到对应的DOM元素。
2. 语法错误：你的script代码最后多了一个多余的});，这会导致JavaScript解析失败，事件绑定根本没被执行。
3. 触发方式冲突：你设置了data-bs-trigger="focus"，这意味着元素失去焦点时popover会自动隐藏，可能会和你设置的5秒自动隐藏逻辑冲突——如果用户在5秒内点击了其他地方，popover会提前消失。如果需要纯粹的自动隐藏效果，可以考虑把trigger改成click或者manual。

修正后的代码 #

<a tabindex="0" class="btn btn-sm btn-primary" role="button" 
   data-bs-toggle="popover" data-bs-trigger="click" 
   data-bs-content="First do as it follows" data-timeout="2000" 
   id="submit-btn1" data-animation="true">Done</a>

<script>
// 先初始化popover（确保Bootstrap能识别并绑定组件）
$("#submit-btn1").popover();

// 绑定shown.bs.popover事件
$("#submit-btn1").on("shown.bs.popover", function() {
  // 读取data-timeout属性的值，让隐藏时间更灵活，默认5000毫秒
  const hideTimeout = $(this).data('timeout') || 5000;
  setTimeout(() => {
    $(this).popover("hide");
  }, hideTimeout);
});
</script>

额外提示 #

• 确保你已经正确引入了jQuery和Bootstrap的JavaScript文件，这是popover组件正常工作的基础。
• 使用$(this)代替重复的id选择器，代码更简洁，性能也更好。
• 如果一定要保留focus触发方式，可以额外监听blur事件，但这样自动隐藏的逻辑可能会被用户操作打断，需要根据你的实际需求权衡。

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