点击Bootstrap Select下拉项内Popover按钮时下拉菜单关闭问题求助

使用bootstrap-select（selectpicker）组件时，为下拉菜单项添加了popover触发按钮，但点击该按钮时，selectpicker的下拉菜单会自动关闭，需要解决此问题。

用户提供的代码 #

HTML #

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/css/bootstrap-select.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/js/bootstrap-select.min.js"></script>

<select id="sortByTag" class="selectpicker" title="some title" multiple></select>

JavaScript #

/* push data from request */
function pushDataToDropdown() {
  let select = $('#sortByTag');
  
  let parentMarkupObj = {
    'markup': `<option>1212123</option>`
  };

  select.append(parentMarkupObj.markup);
}

/* add popover to select items */
function addOptionsDropdownToTags() {
  let allTagInFilter = $('.dropdown-menu.inner li');

  allTagInFilter.append('<button type="button" class="custom-popover" data-toggle="popover" title="Popover title" data-content="Popover">Popover btn</button>');
}


window.addEventListener('DOMContentLoaded', (event) => {
  pushDataToDropdown();
  setTimeout(function() {
    $('select').selectpicker('refresh');
  }, 500)
  setTimeout(addOptionsDropdownToTags, 800);
});

解决方案 #

问题根源是点击popover按钮时，事件会冒泡到bootstrap-select的下拉容器，触发下拉菜单的关闭逻辑。我们需要阻止按钮的点击事件冒泡，同时正确初始化动态添加的popover组件。

修改后的JavaScript代码如下：

/* push data from request */
function pushDataToDropdown() {
  let select = $('#sortByTag');
  
  let parentMarkupObj = {
    'markup': `<option>1212123</option>`
  };

  select.append(parentMarkupObj.markup);
}

/* add popover to select items */
function addOptionsDropdownToTags() {
  let allTagInFilter = $('.dropdown-menu.inner li');

  // 添加按钮并绑定事件
  allTagInFilter.each(function() {
    $(this).append('<button type="button" class="custom-popover" data-toggle="popover" title="Popover title" data-content="Popover">Popover btn</button>');
  });

  // 初始化popover
  $('.custom-popover').popover({
    trigger: 'click',
    container: 'body' // 将popover挂载到body，避免被下拉菜单遮挡
  });

  // 阻止按钮点击事件冒泡，防止下拉菜单关闭
  $('.custom-popover').on('click', function(e) {
    e.stopPropagation();
  });
}

window.addEventListener('DOMContentLoaded', (event) => {
  pushDataToDropdown();
  // 避免使用setTimeout，改用bootstrap-select的loaded事件更可靠
  $('#sortByTag').on('loaded.bs.select', function() {
    addOptionsDropdownToTags();
  });
  $('select').selectpicker('refresh');
});

关键修改点： #

1. 阻止事件冒泡：为popover按钮添加click事件监听，调用e.stopPropagation()阻止事件向上冒泡到下拉容器，避免触发关闭逻辑。
2. 正确初始化popover：动态添加按钮后，手动初始化popover组件，并设置container: 'body'，防止popover被下拉菜单的溢出隐藏样式遮挡。
3. 替换setTimeout：使用bootstrap-select的loaded.bs.select事件替代setTimeout，确保在下拉菜单渲染完成后再添加按钮，避免依赖延迟时间的不可靠性。

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