Bootstrap 4 Popover在HTML Select中仅触发一次的问题求助

我来帮你搞定这个困扰！你遇到的问题根源在于每次change事件触发时都销毁并重新创建Popover实例，这不仅容易导致事件绑定丢失，而且新创建的Popover没有主动触发显示，所以只能工作一次。咱们来调整代码逻辑，让它稳定运行：

问题分析 #

你的原代码在change事件里执行popover('dispose')然后重新初始化，但Bootstrap的Popover在频繁销毁重建时会丢失内部状态，而且初始化后没有调用.popover('show')主动显示，所以只有第一次可能因为浏览器交互巧合触发，后续就失效了。

修复方案 #

我们可以先给所有.criteria元素初始化基础的Popover实例，然后在change事件里动态更新内容并控制显示/隐藏，避免反复销毁重建：

修改后的JS代码

// 页面加载完成后初始化基础Popover配置
$(document).ready(function() {
  $(".criteria").popover({
    title: 'Instruction',
    placement: "top",
    delay: { show: 500, hide: 100 },
    trigger: 'manual' // 设置手动触发，避免默认交互干扰select
  });
});

// 处理select的change事件
$(document).on('change', ".criteria", function(){
  var _this = $(this);
  var rel = _this.find("option:selected").attr("rel");
  
  if(rel && rel !== ''){
    // 先销毁旧实例避免内容缓存，再更新配置并主动显示
    _this.popover('dispose')
         .popover({
            title: 'Instruction',
            content: rel,
            placement: "top",
            delay: { show: 500, hide: 100 },
            trigger: 'manual'
         })
         .popover('show');
  }else{
    // 隐藏并销毁Popover
    _this.popover('hide').popover('dispose');
  }
});

关键改进点 #

• 手动触发模式：设置trigger: 'manual'，完全由代码控制Popover的显示/隐藏，避免和select的默认交互冲突。
• 主动调用显示：当选中带rel的选项时，更新配置后主动调用.popover('show')确保提示框出现。
• 避免内容缓存：更新前销毁旧实例，防止Bootstrap保留之前的提示内容。

效果验证 #

现在测试的话：每次切换select选项，只要选中的option有rel值，Popover就会正确显示对应提示；切换到无rel的选项时，Popover会自动隐藏销毁，下次切换回来依然能正常触发。

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