点击Yes单选钮二次触发时Popover弹窗异常消失求助

云上老周

2026-8-16

解决方案

问题出在Bootstrap Popover的自动触发逻辑与自定义点击事件冲突，导致重复点击Yes时状态混乱。以下是修复方案：

核心思路

将Popover的触发方式设为manual，完全通过代码控制显示/隐藏，避免自动关闭机制干扰
阻止单选按钮的事件冒泡，防止触发文档级别的Popover关闭逻辑
点击Yes时先判断Popover当前状态，避免重复调用show导致的状态异常

完整代码示例

HTML结构

<!-- Popover触发元素 -->
<button id="popoverElement" type="button" class="btn btn-secondary" data-content="这是Popover的内容文本">
  弹窗图标
</button>

<!-- 单选按钮组 -->
<div class="form-check">
  <input class="form-check-input" type="radio" name="popoverToggle" id="yesOpt" value="yes">
  <label class="form-check-label" for="yesOpt">Yes</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="popoverToggle" id="noOpt" value="no">
  <label class="form-check-label" for="noOpt">No</label>
</div>

JavaScript逻辑

// 初始化Popover，禁用自动触发
$('#popoverElement').popover({
  trigger: 'manual',
  placement: 'top' // 可根据需求调整弹窗位置
});

// 绑定单选按钮点击事件
$('input[name="popoverToggle"]').on('click', function(e) {
  // 阻止事件冒泡，避免触发外部点击关闭Popover
  e.stopPropagation();
  
  const selectedVal = $(this).val();
  const popoverInstance = $('#popoverElement').data('bs.popover');
  
  if (selectedVal === 'yes') {
    // 仅当Popover未显示时调用show
    if (!popoverInstance._isShown) {
      $('#popoverElement').popover('show');
    }
  } else {
    // 直接隐藏Popover
    $('#popoverElement').popover('hide');
  }
});