Bootstrap弹出框点击显示随机数问题：后续点击数值未更新

问题原因 #

你的代码存在两个核心问题：

1. 每次点击按钮时重复初始化Popover实例，旧实例未被正确替换，导致内容无法更新
2. document的点击事件被嵌套在按钮点击事件内部，每次点击都会新增一个事件监听，引发逻辑冲突

修复方案 #

以下是两种可行的修改方式：

方式一：提前绑定外部事件+销毁重建实例

<button type="button" class="btn btn-primary rounded" id="d100">
  Popover Button
</button>  

<script>
$(document).ready(function() {
  // 只绑定一次外部点击关闭逻辑
  $(document).on('click', function(event) {
    if (!$(event.target).closest('#d100').length) {
      $('#d100').popover('hide').popover('dispose');
    }
  });

  $('#d100').click(function() {
    var popoverContent = generalDice(1,100,0);
    
    // 先销毁旧实例，再创建带新内容的实例并显示
    $(this).popover('dispose')
           .popover({
             content: popoverContent,
             placement: 'top',
             trigger: 'manual'
           })
           .popover('show');

    return false;
  });
});
</script>

方式二：直接更新Popover内容（Bootstrap 5+适用）

如果使用Bootstrap 5及以上版本，可直接获取实例更新内容，无需反复销毁重建：

<button type="button" class="btn btn-primary rounded" id="d100">
  Popover Button
</button>  

<script>
$(document).ready(function() {
  // 提前初始化Popover基础配置
  $('#d100').popover({
    placement: 'top',
    trigger: 'manual'
  });

  // 绑定外部点击关闭逻辑
  $(document).on('click', function(event) {
    if (!$(event.target).closest('#d100').length) {
      $('#d100').popover('hide');
    }
  });

  $('#d100').click(function() {
    var popoverContent = generalDice(1,100,0);
    var popoverInstance = bootstrap.Popover.getInstance(this);
    
    // 直接更新内容并显示
    popoverInstance.setContent({ content: popoverContent });
    popoverInstance.show();

    return false;
  });
});
</script>

关键修改点 #

• 将document的点击监听移到按钮事件外部，避免重复绑定
• 确保每次点击都使用最新生成的随机数：要么销毁重建实例，要么直接更新已有实例的内容
• 移除冗余的重复初始化逻辑，保证实例状态正确

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