当我单击弹出按钮（在下拉菜单中）时，引导选择下拉菜单正在关闭答案

【问题标题】：Bootstrap select dropdown menu is closing when i'm click on popover button (inside dropdown)当我单击弹出按钮（在下拉菜单中）时，引导选择下拉菜单正在关闭
【发布时间】：2022-10-31 12:07:38
【问题描述】：

对不起，我不太懂英语。

我有一个启用内容吸收的选择器，并且需要为每个下拉菜单项启用一个弹出窗口。问题是，当单击切换按钮时，弹出窗口会隐藏与该项目关联的下拉菜单 - 选择器本身的下拉列表。

This 是我正在使用的 Codepen 中的示例代码。为了简单起见，我使用了 setTimeout。请帮助理解。

/* 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);
});

<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" multiply></select>

【问题讨论】：

标签： javascript jquery twitter-bootstrap popover bootstrap-select

【解决方案1】：

试试这个代码

/* 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(function() {
    $(document).on('click', '.bootstrap-select', function (e) {
      e.stopPropagation();
    });
  }, 650)
  setTimeout(addOptionsDropdownToTags, 800);
});

将此代码 $(document).on('click', 'someyourContainer .dropdown-menu', function (e) { 更改为 $(document).on('click', '.bootstrap-select', function (e) {

【讨论】：